vue实现打印方法
Vue 实现打印功能的方法
在 Vue 项目中实现打印功能可以通过多种方式完成，以下是几种常见的方法：
使用 window.print() 方法
调用浏览器原生的打印功能，适用于打印整个页面或指定区域。
methods: {
printPage() {
window.print();
}
}打印指定区域内容
通过获取 DOM 元素并提取其 HTML 内容，创建一个新窗口进行打印。
methods: {
printSpecificArea() {
const printContent = document.getElementById('print-area').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
}使用 vue-print-nb 插件
安装并配置第三方插件 vue-print-nb，提供更便捷的打印功能。
npm install vue-print-nb --save在 main.js 中引入插件：
import Print from 'vue-print-nb'
Vue.use(Print);在组件中使用 v-print 指令：
<button v-print="printObj">打印</button>
<div id="print-area">需要打印的内容</div>
<script>
export default {
data() {
return {
printObj: {
id: 'print-area',
popTitle: '打印标题'
}
}
}
}
</script>使用 html2canvas 和 jsPDF 生成 PDF 打印
适用于需要将页面内容转换为 PDF 再打印的场景。
npm install html2canvas jspdf --save实现代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
async printPDF() {
const element = document.getElementById('print-area');
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 中通过 @media print 进行定义，确保打印效果符合预期。
@media print {
body * {
visibility: hidden;
}
#print-area, #print-area * {
visibility: visible;
}
#print-area {
position: absolute;
left: 0;
top: 0;
}
}处理动态内容时，确保在打印前数据已加载完成，避免打印空白内容。对于复杂表格或图表，建议使用上述 PDF 生成方案。
