vue实现页面打印
Vue 实现页面打印的几种方法
在 Vue 项目中实现页面打印功能，可以通过以下几种方式实现：
使用 window.print() 方法
直接调用浏览器原生打印 API 是最简单的方式：
methods: {
printPage() {
window.print();
}
}在模板中添加按钮触发：
<button @click="printPage">打印页面</button>这种方法会打印整个页面，适用于简单场景。
使用 vue-print-nb 插件
安装 vue-print-nb 插件可以提供更灵活的打印功能：
npm install vue-print-nb --save在 main.js 中引入：
import Print from 'vue-print-nb'
Vue.use(Print);在组件中使用：
<template>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>
<button v-print="printObj">打印</button>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'printContent',
popTitle: '打印标题' // 打印窗口的标题
}
}
}
}
</script>使用 CSS 控制打印样式
通过 CSS 的 @media print 可以自定义打印样式：
@media print {
body * {
visibility: hidden;
}
#printArea, #printArea * {
visibility: visible;
}
#printArea {
position: absolute;
left: 0;
top: 0;
}
}使用 iframe 实现局部打印
对于需要打印特定区域的内容，可以创建 iframe：
printSpecificContent() {
const printContent = document.getElementById('printArea').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}使用 html2canvas 和 jsPDF 生成 PDF
对于需要生成 PDF 的场景：
npm install html2canvas jspdf实现代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
generatePDF() {
html2canvas(document.querySelector('#printArea')).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('document.pdf');
});
}
}注意事项
- 打印时隐藏不需要的元素可以通过 CSS 的
display: none或visibility: hidden - 确保打印内容有足够的宽度，避免内容被截断
- 对于复杂表格，建议使用
page-break-inside: avoid防止跨页断行 - 测试不同浏览器的打印效果，特别是 Chrome 和 Firefox 可能有差异
以上方法可以根据具体需求选择使用，对于简单需求直接使用 window.print() 即可，复杂场景可以考虑使用专门的打印插件或生成 PDF 的方案。
