vue实现打印功能
使用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指令
<template>
<button v-print="printObj">打印</button>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'printContent',
popTitle: '打印标题' // 打印窗口的标题
}
}
}
}
</script>使用window.print()原生方法实现
创建打印方法
methods: {
handlePrint() {
const printContent = document.getElementById('printContent').innerHTML
const originalContent = document.body.innerHTML
document.body.innerHTML = printContent
window.print()
document.body.innerHTML = originalContent
}
}在模板中添加打印按钮和内容区域
<button @click="handlePrint">打印</button>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>使用CSS控制打印样式
添加打印专用样式表
<link rel="stylesheet" href="print.css" media="print">或在现有样式表中添加媒体查询
@media print {
body * {
visibility: hidden;
}
#printContent, #printContent * {
visibility: visible;
}
#printContent {
position: absolute;
left: 0;
top: 0;
}
}处理打印分页问题
通过CSS控制分页
@media print {
.page-break {
page-break-after: always;
}
}在需要分页的位置添加分页元素
<div class="page-break"></div>注意事项
打印前确保内容已完全加载，特别是异步数据 动态内容打印时需要注意恢复原始DOM状态 复杂的表格和布局可能需要特殊CSS处理 某些浏览器可能需要用户手动启用弹出窗口
