vue实现表单打印
Vue 实现表单打印的方法
在 Vue 中实现表单打印功能，可以通过以下几种方式完成：
使用 window.print() 方法
创建一个专门用于打印的组件或页面，隐藏不需要打印的元素，调用浏览器原生打印功能。
<template>
<div>
<div class="print-content">
<!-- 表单内容 -->
<form>
<input v-model="formData.name" />
<!-- 其他表单字段 -->
</form>
</div>
<button @click="printForm">打印表单</button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: ''
}
}
},
methods: {
printForm() {
window.print()
}
}
}
</script>
<style>
@media print {
/* 隐藏不需要打印的元素 */
button {
display: none;
}
/* 优化打印样式 */
.print-content {
width: 100%;
}
}
</style>使用 vue-print-nb 插件
安装并配置 vue-print-nb 插件，可以更便捷地实现打印功能。
npm install vue-print-nb --save在 Vue 项目中使用：
import Print from 'vue-print-nb'
Vue.use(Print)<template>
<div>
<div id="printArea">
<!-- 表单内容 -->
<form>
<input v-model="formData.email" />
</form>
</div>
<button v-print="'#printArea'">打印</button>
</div>
</template>使用 html2canvas 和 jsPDF 生成 PDF
对于需要更复杂打印控制的场景，可以结合 html2canvas 和 jsPDF 库。
npm install html2canvas jspdf实现代码：
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
methods: {
async printPDF() {
const element = document.getElementById('printArea')
const canvas = await html2canvas(element)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save('form.pdf')
}
}打印样式优化
为获得更好的打印效果，需要在 CSS 中专门设置打印样式：
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* 移除背景色确保打印清晰 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}动态内容打印处理
对于需要打印动态生成的内容，可以在打印前先渲染数据：
printDynamicContent() {
this.loading = true
this.$nextTick(() => {
window.print()
this.loading = false
})
}以上方法可以根据具体需求选择使用，window.print() 最简单，vue-print-nb 更方便，而 html2canvas+jspdf 则提供最大的灵活性。
