vue 实现打印
Vue 实现打印功能的方法
在Vue项目中实现打印功能，可以通过以下几种方式实现：
使用window.print()方法
通过调用浏览器的原生打印API实现基础打印功能，适用于简单内容打印。
// 在Vue组件中定义打印方法
methods: {
printContent() {
window.print();
}
}使用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>自定义打印样式
通过CSS媒体查询控制打印时的样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
}使用html2canvas+jspdf实现PDF打印
适用于需要将HTML内容转为PDF再打印的场景。
安装依赖：
npm install html2canvas jspdf实现代码：
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.autoPrint();
window.open(pdf.output('bloburl'), '_blank');
}
}打印特定区域
通过创建新窗口或iframe实现局部内容打印。
printSection(selector) {
const printContent = document.querySelector(selector).innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}注意事项
- 打印前检查浏览器是否阻止了弹出窗口
- 复杂布局建议使用PDF打印方案
- 移动端打印体验可能不一致
- 考虑添加打印加载状态提示
- 测试不同浏览器的兼容性
以上方法可以根据具体需求选择使用，简单场景推荐使用vue-print-nb插件，复杂场景可以考虑html2canvas+jspdf方案。
