vue实现打印插件
vue-print-nb 插件实现打印
安装插件：
npm install vue-print-nb --save全局引入：
import Print from 'vue-print-nb'
Vue.use(Print)局部使用：
<template>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>
<button v-print="printConfig">打印</button>
</template>
<script>
export default {
data() {
return {
printConfig: {
id: 'printContent',
popTitle: '打印标题', // 打印窗口标题
extraCss: 'https://xxx.css', // 额外CSS
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外头部标签
}
}
}
}
</script>window.print() 原生方法实现
创建打印区域：
<template>
<div id="printArea">
<!-- 打印内容 -->
</div>
<button @click="handlePrint">打印</button>
</template>
<script>
export default {
methods: {
handlePrint() {
const printContent = document.getElementById('printArea').innerHTML
const originalContent = document.body.innerHTML
document.body.innerHTML = printContent
window.print()
document.body.innerHTML = originalContent
}
}
}
</script>打印样式控制
添加打印专用样式：
<style>
@media print {
/* 隐藏不需要打印的元素 */
.no-print {
display: none;
}
/* 调整打印布局 */
body {
margin: 0;
padding: 0;
}
/* 强制分页 */
.page-break {
page-break-after: always;
}
}
</style>打印图片处理
确保图片加载完成：
methods: {
printWithImages() {
const printWindow = window.open('', '_blank')
printWindow.document.write('<html><head><title>打印</title>')
printWindow.document.write('<style>@page { size: auto; margin: 0; }</style>')
printWindow.document.write('</head><body>')
const images = document.querySelectorAll('#printArea img')
let loaded = 0
images.forEach(img => {
const newImg = new Image()
newImg.onload = () => {
loaded++
if (loaded === images.length) {
printWindow.document.write(document.getElementById('printArea').innerHTML)
printWindow.document.write('</body></html>')
printWindow.document.close()
printWindow.focus()
setTimeout(() => {
printWindow.print()
printWindow.close()
}, 500)
}
}
newImg.src = img.src
})
}
}打印表格优化
处理表格分页：
@media print {
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}打印事件监听
添加打印前后事件：
window.matchMedia('print').addListener(mql => {
if (mql.matches) {
console.log('打印前处理')
} else {
console.log('打印后处理')
}
})
