附上 print.js 地址: print.js
1簿透、注冊(cè)插件
import Print from '@plugin/print'
Vue.use(Print)
1.1. HTML設(shè)置ref砸讳，可指定區(qū)域打印
<template>
<section ref="print">
打印內(nèi)容
<div class="no-print">不要打印我</div>
</section>
</template>
注意事項(xiàng)幕与，需使用ref獲取dom節(jié)點(diǎn)速兔，若直接通過id或class獲取，則webpack打包部署后打印內(nèi)容為空淤齐。
1.2. 指定不打印區(qū)域
方法一. 添加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束世、當(dāng)打印的內(nèi)容包含 canvas
使用 print.js 打印需要將 canvas 轉(zhuǎn)為 img， 下面是在使用時(shí)轉(zhuǎn)換方法示例
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)
}
