vue实现打印
Vue 实现打印功能的方法
在Vue项目中实现打印功能，可以通过以下几种方式完成：
使用window.print()方法
通过调用浏览器原生的window.print()方法实现打印当前页面内容。适用于简单场景，但无法定制打印内容。
methods: {
printPage() {
window.print();
}
}使用vue-print-nb插件
vue-print-nb是一个专门为Vue设计的打印插件，可以更灵活地控制打印内容。
安装插件：
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="'#printContent'">打印</button>
</template>使用iframe实现局部打印
创建一个隐藏的iframe，将要打印的内容放入iframe中，然后调用iframe的打印方法。
methods: {
printPartial() {
const printContent = document.getElementById('printArea').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
}使用CSS控制打印样式
通过CSS的@media print规则定义打印时的特殊样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
}使用html2canvas+jspdf生成PDF打印
对于需要将内容转为PDF再打印的场景，可以使用html2canvas和jspdf库组合。
安装依赖：
npm install html2canvas jspdf --save实现代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
async printPDF() {
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');
}
}注意事项
- 打印前确保内容已完全加载，特别是异步数据
- 对于复杂布局，可能需要调整打印样式
- 移动端打印体验可能不如桌面端
- 某些浏览器可能有打印限制或需要用户确认
以上方法可根据具体需求选择使用，vue-print-nb插件提供了较好的平衡点，既简单易用又具备一定灵活性。
