vue实现打印插件
Vue 打印插件实现方案
在Vue项目中实现打印功能，可通过原生API或第三方库完成。以下是几种常见方案：
使用原生window.print()方法
直接调用浏览器打印API实现基础打印功能：
// 在Vue组件中
methods: {
printContent() {
window.print()
}
}需配合CSS媒体查询控制打印样式：
@media print {
.no-print {
display: none;
}
}使用vue-print-nb插件
安装流行打印插件vue-print-nb：
npm install vue-print-nb --save全局注册或局部使用：
// 全局注册
import Print from 'vue-print-nb'
Vue.use(Print)
// 局部使用
import print from 'vue-print-nb'
export default {
directives: {
print
}
}模板中使用指令：
<button v-print="printObj">打印</button>
<div id="printContent">需要打印的内容</div>
<script>
export default {
data() {
return {
printObj: {
id: "printContent",
popTitle: '打印标题', // 打印窗口标题
extraCss: 'https://example.com/print.css', // 额外CSS
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外head标签
}
}
}
}
</script>使用html2canvas + jsPDF实现PDF打印
组合使用两个库实现HTML转PDF打印：
npm install html2canvas jspdf组件实现代码：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
methods: {
async printPDF() {
const element = document.getElementById('print-area')
const canvas = await html2canvas(element, {
scale: 2 // 提高分辨率
})
const pdf = new jsPDF('p', 'mm', 'a4')
const imgData = canvas.toDataURL('image/png')
const imgWidth = 190 // A4纸宽度
const pageHeight = 277 // A4纸高度
const imgHeight = canvas.height * imgWidth / canvas.width
let heightLeft = imgHeight
let position = 10 // 页边距
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
heightLeft -= pageHeight
while (heightLeft >= 0) {
position = heightLeft - imgHeight
pdf.addPage()
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
heightLeft -= pageHeight
}
pdf.save('document.pdf')
}
}打印优化技巧
添加打印专用样式表确保布局正确：
<link rel="stylesheet" media="print" href="/print.css">处理分页问题：
@media print {
.page-break {
page-break-after: always;
}
}处理背景打印：
@media print {
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}特殊场景处理
打印动态内容前确保数据加载：
async printWithData() {
await this.loadData()
this.$nextTick(() => {
window.print()
})
}处理iframe打印：
printIframe() {
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
doc.write('<html><body>' + document.getElementById('content').innerHTML + '</body></html>')
doc.close()
iframe.contentWindow.focus()
iframe.contentWindow.print()
setTimeout(() => {
document.body.removeChild(iframe)
}, 1000)
}以上方案可根据具体需求选择使用，vue-print-nb适合简单场景，html2canvas+jsPDF组合适合需要生成PDF的场景，原生API适合基础打印需求。
