vue中实现打印
Vue 中实现打印功能的方法
在 Vue 项目中实现打印功能可以通过多种方式完成，以下是几种常见的方法：
使用 window.print() 方法
window.print() 是浏览器原生支持的打印方法，可以直接调用打印当前页面。
methods: {
printPage() {
window.print();
}
}在模板中添加按钮触发打印：
<button @click="printPage">打印当前页</button>使用 vue-print-nb 插件
vue-print-nb 是一个专门为 Vue 设计的打印插件，可以更灵活地控制打印内容。
安装插件：
npm install vue-print-nb --save在 main.js 中引入：
import Print from 'vue-print-nb'
Vue.use(Print)在组件中使用：
<div id="printContent">
<!-- 需要打印的内容 -->
</div>
<button v-print="'#printContent'">打印指定区域</button>使用 html2canvas + jsPDF 实现复杂打印
对于需要将 DOM 转换为 PDF 再打印的场景，可以使用 html2canvas 和 jsPDF 组合。
安装依赖：
npm install html2canvas jspdf --save实现代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
async printToPDF() {
const element = document.getElementById('printArea');
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('print.pdf');
// 或者直接打印
// pdf.autoPrint();
// window.open(pdf.output('bloburl'));
}
}打印样式优化
为打印页面添加专门的样式：
<style>
@media print {
body * {
visibility: hidden;
}
#printArea, #printArea * {
visibility: visible;
}
#printArea {
position: absolute;
left: 0;
top: 0;
}
}
</style>处理打印分页
对于长内容需要分页的情况：
@media print {
.page-break {
page-break-after: always;
}
}在需要分页的位置添加：
<div class="page-break"></div>以上方法可以根据具体需求选择使用，简单的打印需求使用 window.print() 或 vue-print-nb 即可，复杂的打印需求可以考虑 html2canvas + jsPDF 方案。
