vue实现批量打印
实现批量打印的基本思路
在Vue中实现批量打印功能通常需要结合浏览器的打印API和前端模板渲染。核心步骤包括数据准备、模板设计、打印触发三部分。以下提供两种常见实现方案。
方案一：使用window.print()直接打印
创建隐藏的打印容器，动态填充需要打印的内容，调用浏览器打印接口。
<template>
<div>
<button @click="handleBatchPrint">批量打印</button>
<div id="print-container" style="display:none"></div>
</div>
</template>
<script>
export default {
data() {
return {
printData: [
{ id: 1, content: "打印内容1" },
{ id: 2, content: "打印内容2" }
]
}
},
methods: {
generatePrintContent() {
const container = document.getElementById('print-container')
container.innerHTML = this.printData.map(item => `
<div class="print-page">
<h3>${item.id}</h3>
<p>${item.content}</p>
</div>
`).join('')
},
handleBatchPrint() {
this.generatePrintContent()
setTimeout(() => {
window.print()
}, 100)
}
}
}
</script>
<style>
@media print {
body * {
visibility: hidden;
}
#print-container, #print-container * {
visibility: visible;
}
.print-page {
page-break-after: always;
}
}
</style>方案二：使用打印插件vue-print-nb
对于更复杂的打印需求，可以使用第三方插件如vue-print-nb。
安装依赖：
npm install vue-print-nb --save组件实现：
<template>
<div>
<button v-print="printObj">批量打印</button>
<div id="print-content">
<div v-for="item in printData" :key="item.id" class="print-item">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
import print from 'vue-print-nb'
export default {
directives: { print },
data() {
return {
printData: [...], // 打印数据
printObj: {
id: 'print-content',
popTitle: '批量打印',
extraCss: 'https://example.com/print.css'
}
}
}
}
</script>打印样式优化技巧
为保证打印效果，需要特别注意CSS打印媒体的设置：
@media print {
@page {
size: A4;
margin: 0;
}
body {
-webkit-print-color-adjust: exact;
}
.no-print {
display: none !important;
}
.page-break {
page-break-after: always;
}
}处理动态数据加载
当打印数据需要异步加载时，确保数据就绪后再触发打印：
async loadDataAndPrint() {
await this.fetchPrintData()
this.$nextTick(() => {
this.handleBatchPrint()
})
}注意事项
- 浏览器拦截：部分浏览器可能拦截程序触发的打印窗口，建议在用户操作回调中触发打印
- 分页控制：使用CSS的
page-break-after属性控制分页 - 图片加载：确保所有打印图片已完全加载再触发打印
- 移动端适配：移动设备打印功能可能受限，需做兼容性测试
以上方案可根据实际项目需求进行组合或调整，关键是根据业务场景设计合适的打印模板和数据处理逻辑。
