vue 实现打印页面
实现 Vue 页面打印功能
在 Vue 项目中实现打印功能，可以通过以下方法完成。这些方法涵盖了从简单打印整个页面到定制打印特定区域的不同需求。
使用 window.print() 方法
最简单的打印方式是调用浏览器的原生打印功能。这会将整个页面内容发送到打印机。
methods: {
printPage() {
window.print();
}
}在模板中添加一个按钮触发打印：
<button @click="printPage">打印页面</button>打印特定区域
通常只需要打印页面中的特定部分，而不是整个页面。可以通过以下方式实现：
创建打印样式表：
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}在需要打印的区域添加 print-area 类：
<div class="print-area">
<!-- 需要打印的内容 -->
</div>使用 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>处理打印样式问题
打印时可能需要调整样式以确保打印效果符合预期。可以专门为打印添加样式：
@media print {
@page {
size: A4;
margin: 0;
}
body {
padding: 10mm;
font-size: 12pt;
}
.no-print {
display: none;
}
}打印前预处理数据
有时需要在打印前对数据进行处理：
methods: {
prepareForPrint() {
// 处理数据
this.printData = this.formatData(this.originalData);
this.$nextTick(() => {
window.print();
});
},
formatData(data) {
// 格式化数据逻辑
return data;
}
}打印多页内容
处理多页打印时，可能需要分页控制：
@media print {
.page-break {
page-break-after: always;
}
}在需要分页的位置添加分页控制：
<div class="page-break"></div>使用 iframe 打印
对于更复杂的打印需求，可以创建 iframe 来实现：
printWithIframe() {
const content = document.getElementById('printContent').innerHTML;
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
frameDoc.open();
frameDoc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印</title>
<style>
@page { size: auto; margin: 0mm; }
body { margin: 10mm; }
</style>
</head>
<body>${content}</body>
</html>
`);
frameDoc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
setTimeout(() => document.body.removeChild(iframe), 1000);
}这些方法提供了从简单到复杂的各种打印解决方案，可以根据具体需求选择适合的方式实现 Vue 页面打印功能。
