vue通过url打印html,vue 打印

附上 print.js 地址: print.js

1、注册插件

import Print from '@plugin/print'

Vue.use(Print)

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

打印内容

不要打印我

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

1.2. 指定不打印区域

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

不要打印我

方法二. 自定义类名

不要打印我

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)

}