vue 实现打印页面
使用 vue-print-nb 插件实现打印
安装 vue-print-nb 插件：
npm install vue-print-nb --save在 main.js 中引入并注册：
import Print from 'vue-print-nb'
Vue.use(Print)在组件模板中添加打印指令：
<button v-print="printObj">打印</button>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>配置打印对象：
data() {
return {
printObj: {
id: 'printContent',
popTitle: '打印标题', // 打印窗口标题
extraCss: 'https://example.com/print.css', // 额外CSS
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外head标签
}
}
}使用 window.print() 原生方法
创建打印方法：
methods: {
printPage() {
window.print()
}
}添加打印按钮：
<button @click="printPage">打印页面</button>使用媒体查询设置打印样式：
@media print {
.no-print {
display: none;
}
body {
padding: 0;
margin: 0;
}
}使用 iframe 实现局部打印
创建打印方法：
printPartial() {
const printContent = document.getElementById('printArea').innerHTML
const originalContent = document.body.innerHTML
document.body.innerHTML = printContent
window.print()
document.body.innerHTML = originalContent
}添加打印区域和按钮：
<div id="printArea">
<!-- 需要打印的内容 -->
</div>
<button @click="printPartial">打印局部内容</button>使用第三方库 html2canvas 和 jsPDF
安装依赖：
npm install html2canvas jspdf --save实现导出PDF功能：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
exportPDF() {
const element = document.getElementById('pdfContent')
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save('document.pdf')
})
}添加内容区域和按钮：
<div id="pdfContent">
<!-- 需要转换为PDF的内容 -->
</div>
<button @click="exportPDF">导出PDF</button>注意事项
打印样式应通过 @media print 媒体查询专门设置，确保打印效果符合预期
对于复杂页面，建议只打印必要内容，隐藏导航栏、侧边栏等不需要打印的元素
测试不同浏览器的打印兼容性，Chrome、Firefox 和 Edge 可能有细微差异
打印前可以通过 window.onafterprint 和 window.onbeforeprint 事件添加回调函数
