Vue打印预览功能实现：利用vue-print-nb插件
在Web项目中，用户经常需要打印页面内容。直接使用浏览器的打印功能（Ctrl+P）往往效果不理想：布局错乱、样式丢失、多余元素被打印出来。vue项目中插件可以轻松解决这些问题，实现专业的打印预览功能。
第一步：安装vue-print-nb插件
这个插件能帮助我们快速添加打印功能：
npm install vue-print-nb --save
# 或
yarn add vue-print-nb第二步：在Vue项目中配置插件
在main.js中全局引入：
import Print from 'vue-print-nb'
Vue.use(Print)第三步：创建打印区域模板
<template>
<div>
<!-- 打印按钮 -->
<button v-print="printConfig">打印当前内容</button>
<!-- 隐藏非打印内容 -->
<div class="non-printable">
这部分不会被打印
</div>
<!-- 打印区域 -->
<div id="printArea">
<h2>销售订单</h2>
<table>
<tr>
<th>产品名称</th>
<th>数量</th>
<th>单价</th>
</tr>
<tr>
<td>Vue教程</td>
<td>1</td>
<td>¥99</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
printConfig: {
id: "printArea", // 要打印的区域ID
popTitle: '订单详情', // 打印窗口标题
extracss: 'https://example.com/print-styles.css', // 额外CSS
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
}
}
}
}
</script>
<style>
/* 普通屏幕样式 */
.non-printable {
background: #f0f0f0;
padding: 10px;
}
/* 专门用于打印的样式 */
@media print {
body * {
visibility: hidden; /* 隐藏所有元素 */
}
#printArea,
#printArea * {
visibility: visible; /* 只显示打印区域 */
}
#printArea {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.no-print {
display: none !important; /* 强制隐藏不需要的元素 */
}
}
</style>第四步：关键配置说明
指定打印区域：通过id绑定要打印的dom元素
自定义打印标题：popTitle设置打印窗口的标题
添加打印专用样式：使用@media print媒体查询
隐藏不需要的元素：给元素添加no-print类
常见问题解决
页眉页脚显示问题：在打印设置中取消页眉页脚
背景颜色不打印：在浏览器设置中勾选"背景图形"
分页问题：在CSS中使用page-break-before: always;控制分页
移动端适配：确保打印区域宽度设置为100%
优化打印体验的技巧
简化打印内容：移除不必要的图片和广告
使用PDF替代：通过window.print()转为PDF更灵活
固定尺寸：使用cm或mm单位确保打印尺寸准确
测试不同浏览器：Chrome/Firefox的打印表现可能不同
实现Vue打印预览功能后，用户点击打印按钮时，只会输出指定区域的内容，保持页面原有布局不变。这种方法比直接使用浏览器打印更专业，能确保表格、图表等复杂内容的打印效果。
通过合理的CSS打印媒体查询控制，可以进一步优化打印页面的边距、字体大小和分页效果。这种Vue打印解决方案适用于订单、报表、合同等需要精确打印的场景，大幅提升用户体验。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
