附上 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)
}
网友评论