vue实现打印页面
Vue 实现页面打印功能
在 Vue 项目中实现页面打印功能，可以通过以下几种方式完成：
使用 window.print() 方法
创建一个打印按钮，点击时调用原生打印 API：
<button @click="printPage">打印页面</button>methods: {
printPage() {
window.print();
}
}打印特定区域
通过 CSS 控制打印范围，隐藏不需要打印的元素：
<div class="print-area">
<!-- 需要打印的内容 -->
</div>
<button @click="printArea">打印指定区域</button>methods: {
printArea() {
const printContent = document.querySelector('.print-area').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
}使用 vue-print-nb 插件
安装打印插件：
npm install vue-print-nb --save在组件中使用：
import Print from 'vue-print-nb'
export default {
directives: {
Print
}
}<div id="printMe">
<!-- 打印内容 -->
</div>
<button v-print="'#printMe'">打印</button>自定义打印样式
在 CSS 中添加打印媒体查询：
@media print {
body * {
visibility: hidden;
}
.print-content, .print-content * {
visibility: visible;
}
.print-content {
position: absolute;
left: 0;
top: 0;
}
}打印事件处理
在打印前后添加自定义逻辑：
methods: {
handlePrint() {
window.addEventListener('beforeprint', this.beforePrint);
window.addEventListener('afterprint', this.afterPrint);
window.print();
},
beforePrint() {
// 打印前处理
},
afterPrint() {
// 打印后处理
}
}注意事项
- 打印样式可能需要单独调整，使用 @media print 媒体查询
- 复杂布局可能需要特殊处理，避免打印时出现分页问题
- 图片打印需要确保 URL 是绝对路径
- 考虑添加打印按钮的权限控制
以上方法可以根据具体需求选择使用，简单打印需求使用原生 API 即可，复杂需求可以考虑使用专用插件。
