vue 实现打印
Vue 实现打印功能的方法
在Vue项目中实现打印功能，可以通过以下几种方式实现：
使用window.print()方法
这是最简单的打印方式，直接调用浏览器的打印功能。
methods: {
printPage() {
window.print();
}
}使用vue-print-nb插件
这是一个专门为Vue设计的打印插件，使用简单且功能强大。
安装：
npm install vue-print-nb --save使用：
import Print from 'vue-print-nb'
Vue.use(Print);
// 在模板中使用
<button v-print="printObj">打印</button>
data() {
return {
printObj: {
id: 'printArea', // 要打印的区域ID
popTitle: '打印标题' // 打印对话框标题
}
}
}使用html2canvas和jspdf库
这种方法适合需要将内容转换为PDF再打印的场景。
安装：
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('document.pdf');
}
}使用CSS控制打印样式
可以通过CSS的@media print规则来控制打印时的样式。
@media print {
body * {
visibility: hidden;
}
#printArea, #printArea * {
visibility: visible;
}
#printArea {
position: absolute;
left: 0;
top: 0;
}
}注意事项
- 打印区域需要有固定的宽度，避免内容被截断
- 隐藏不需要打印的元素可以使用CSS的display: none
- 对于复杂的表格或布局，建议使用专门的打印样式表
- 某些浏览器可能会阻止弹出式打印窗口，需要用户允许
以上方法可以根据具体需求选择使用，简单的打印需求使用window.print()或vue-print-nb即可，复杂的打印需求可以考虑html2canvas+jspdf的方案。
