vue实现模板打印
Vue 实现模板打印的方法
在 Vue 中实现模板打印功能通常需要结合浏览器的打印 API 和 CSS 样式控制。以下是几种常见的方法：
使用 window.print() 方法
创建一个打印按钮，点击时调用 window.print() 方法触发浏览器打印对话框。
<template>
<div>
<div id="print-content">
<!-- 这里是需要打印的内容 -->
<h1>打印内容标题</h1>
<p>这是要打印的文本内容</p>
</div>
<button @click="printContent">打印</button>
</div>
</template>
<script>
export default {
methods: {
printContent() {
window.print();
}
}
}
</script>
<style>
@media print {
/* 隐藏不需要打印的元素 */
button {
display: none;
}
/* 设置打印样式 */
#print-content {
width: 100%;
margin: 0;
padding: 0;
}
}
</style>使用 iframe 打印特定内容
如果需要更精细控制打印内容，可以使用 iframe 方式：
<template>
<div>
<div ref="printContent">
<!-- 打印内容 -->
<h1>订单详情</h1>
<table>
<!-- 表格内容 -->
</table>
</div>
<button @click="printSpecificContent">打印订单</button>
</div>
</template>
<script>
export default {
methods: {
printSpecificContent() {
const content = this.$refs.printContent.innerHTML;
const frame = document.createElement('iframe');
frame.style.display = 'none';
document.body.appendChild(frame);
const frameDoc = frame.contentWindow || frame.contentDocument;
if (frameDoc.document) {
frameDoc = frameDoc.document;
}
frameDoc.open();
frameDoc.write('<html><head><title>订单打印</title></head><body>');
frameDoc.write(content);
frameDoc.write('</body></html>');
frameDoc.close();
setTimeout(() => {
frame.contentWindow.print();
document.body.removeChild(frame);
}, 100);
}
}
}
</script>使用第三方库
可以考虑使用专门处理打印的 Vue 插件，如 vue-print-nb：
-
安装插件：
npm install vue-print-nb --save -
在项目中使用：
import Print from 'vue-print-nb'
Vue.use(Print);
3. 在模板中使用：
```html
<template>
<div>
<div id="print-area">
<!-- 打印内容 -->
</div>
<button v-print="'#print-area'">打印</button>
</div>
</template>打印样式优化
为获得更好的打印效果，需要特别注意 CSS 打印样式：
@media print {
body * {
visibility: hidden;
}
#print-content, #print-content * {
visibility: visible;
}
#print-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* 避免打印时出现分页问题 */
table {
page-break-inside: avoid;
}
/* 设置页边距 */
@page {
size: auto;
margin: 0mm;
}
}处理动态内容打印
对于需要等待数据加载后再打印的情况：
methods: {
async printWithData() {
await this.loadData(); // 等待数据加载
this.$nextTick(() => {
window.print();
});
}
}以上方法可以根据具体需求选择使用，对于简单打印需求直接使用 window.print() 配合打印样式即可，更复杂的需求可以考虑 iframe 或第三方库方案。
