vue项目实现打印
实现Vue项目打印功能的方法
使用window.print()方法
在Vue组件中直接调用浏览器原生打印API是最简单的方式。创建一个打印按钮，点击时触发打印当前页面。
methods: {
printPage() {
window.print();
}
}使用vue-print-nb插件
安装vue-print-nb插件可以更方便地实现局部打印功能。
安装命令：
npm install vue-print-nb --save在main.js中引入：
import Print from 'vue-print-nb'
Vue.use(Print)在组件中使用：
<button v-print="printObj">打印</button>
<div id="printContent">需要打印的内容</div>
<script>
export default {
data() {
return {
printObj: {
id: 'printContent',
popTitle: '打印标题'
}
}
}
}
</script>使用CSS控制打印样式
通过@media print媒体查询可以自定义打印时的样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
.print-content {
width: 100%;
}
}使用html2canvas+jspdf实现复杂打印
对于需要将DOM转换为图片再打印的场景，可以使用html2canvas和jspdf库组合。
安装依赖：
npm install html2canvas jspdf实现代码：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
methods: {
async printDOM() {
const element = document.getElementById('print-area')
const canvas = await html2canvas(element)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save('document.pdf')
}
}打印优化技巧
设置打印页面的页眉页脚为空，避免浏览器默认添加的URL和页码信息。
@page {
size: auto;
margin: 0mm;
}对于分页打印的内容，可以使用page-break属性控制分页。
.page-break {
page-break-after: always;
}注意事项
浏览器打印功能会受安全限制，某些样式可能无法正常打印。测试时建议使用Chrome浏览器的打印预览功能。
打印前确保内容已完全加载，特别是异步数据。可以在打印方法中添加加载判断或使用v-if控制打印按钮的显示。
