vue 打印

附上 print.js 地址: print.js

1、注册插件

 import Print from '@plugin/print'
Vue.use(Print)

1.1. HTML设置ref，可指定区域打印

<template>
<section ref="print">
    打印内容
    <div class="no-print">不要打印我</div>
</section>
</template>

注意事项，需使用ref获取dom节点，若直接通过id或class获取，则webpack打包部署后打印内容为空。

1.2. 指定不打印区域

方法一. 添加no-print样式类

<div class="no-print">不要打印我</div>

方法二. 自定义类名

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$ref.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

1.3. 打印

this.$print(this.$refs.print) // 使用

2、当打印的内容包含 canvas

使用 print.js 打印需要将 canvas 转为 img， 下面是在使用时转换方法示例

canvasSwitchImg () {
      let mainContent = this.$refs.print.$refs.mainContent
      let canvas = mainContent.querySelectorAll('.canvas-pdf')
      let box = mainContent.querySelectorAll('.pdf-box')
      if (canvas.length > 0) {
        for (let i = 0; i < canvas.length; i++) {
          let img = document.createElement('img')
          let url = canvas[i].toDataURL()
          img.src = url
          box[i].replaceChild(img, canvas[i])
        }
      }
    }

打印

print () {
    this.canvasReset()
    this.$print(this.$refs.print.$refs.mainContent)
}