vue实现html打印功能
使用Vue实现HTML打印功能
在Vue项目中实现HTML打印功能，可以通过以下几种方法实现：
使用window.print()方法
通过调用浏览器原生window.print()方法实现打印功能，适用于简单场景。
methods: {
printPage() {
window.print()
}
}在模板中添加打印按钮：
<button @click="printPage">打印当前页</button>使用vue-print-nb插件
安装vue-print-nb插件可以提供更灵活的打印控制：
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>自定义打印样式
通过CSS媒体查询定义打印时的特殊样式：
@media print {
body * {
visibility: hidden;
}
#printContent, #printContent * {
visibility: visible;
}
#printContent {
position: absolute;
left: 0;
top: 0;
}
}使用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.contentWindow || iframe.contentDocument
if (frameDoc.document) frameDoc = frameDoc.document
frameDoc.open()
frameDoc.write(content)
frameDoc.close()
setTimeout(() => {
iframe.contentWindow.focus()
iframe.contentWindow.print()
document.body.removeChild(iframe)
}, 200)
}处理打印分页
在打印内容中添加分页控制：
@media print {
.page-break {
page-break-after: always;
}
}在HTML中使用：
<div class="page-break"></div>注意事项
- 打印前确保所有动态内容已加载完成
- 考虑使用
window.onbeforeprint和window.onafterprint事件处理打印前后的逻辑 - 对于复杂表格，可能需要调整CSS确保打印时不出现截断
- 测试不同浏览器的打印兼容性
以上方法可以根据具体需求选择使用，简单场景推荐使用原生window.print()，复杂需求建议使用vue-print-nb插件。
