vue实现表单打印
Vue 实现表单打印的方法
在 Vue 中实现表单打印功能，可以通过多种方式完成。以下是几种常见的实现方法：
使用 window.print() 方法
创建一个专门用于打印的组件或页面，隐藏不需要打印的元素，调用浏览器原生打印功能。
<template>
<div>
<div class="print-area">
<!-- 表单内容 -->
<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-area {
width: 100%;
}
}
</style>使用第三方库 vue-print-nb
安装 vue-print-nb 库可以更方便地实现打印功能。
npm install vue-print-nb --save在 main.js 中引入并注册插件：
import Print from 'vue-print-nb'
Vue.use(Print)在组件中使用：
<template>
<div>
<div id="printMe">
<!-- 表单内容 -->
<form>
<input v-model="formData.name" />
</form>
</div>
<button v-print="'#printMe'">打印表单</button>
</div>
</template>使用 html2canvas 和 jsPDF 生成 PDF
这种方法适合需要将表单保存为 PDF 文件的情况。
npm install html2canvas jspdf实现代码：
<template>
<div>
<div ref="printContent">
<!-- 表单内容 -->
<form>
<input v-model="formData.name" />
</form>
</div>
<button @click="exportToPDF">导出为PDF</button>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export default {
methods: {
async exportToPDF() {
const element = this.$refs.printContent
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')
}
}
}
</script>打印样式优化
在 CSS 中添加打印专用的样式可以改善打印效果：
@media print {
body * {
visibility: hidden;
}
.print-content, .print-content * {
visibility: visible;
}
.print-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* 移除背景色确保打印清晰 */
* {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}以上方法可以根据具体需求选择使用，每种方法都有其适用场景和优缺点。
