vue实现套打
Vue实现套打功能
套打通常指在固定格式的纸质文档上精确打印动态数据，常见于发票、合同等场景。以下是Vue中实现套打的几种方法：
使用CSS精确控制打印样式
在Vue组件中添加打印专用样式，通过@media print控制打印效果：
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}动态生成打印内容
通过Vue的模板和数据绑定功能动态生成套打内容：
<template>
<div class="print-area">
<div v-for="item in items" :key="item.id"
:style="{ position: 'absolute',
left: item.x + 'mm',
top: item.y + 'mm' }">
{{ item.content }}
</div>
</div>
</template>使用PDF.js实现精确套打
对于需要更高精度的场景，可以结合PDF.js库：
// 安装pdf-lib
import { PDFDocument, rgb } from 'pdf-lib'
async function fillPdfTemplate(formData) {
const templateBytes = await fetch('template.pdf').then(res => res.arrayBuffer())
const pdfDoc = await PDFDocument.load(templateBytes)
const form = pdfDoc.getForm()
form.getTextField('name').setText(formData.name)
form.getTextField('date').setText(formData.date)
const pdfBytes = await pdfDoc.save()
return pdfBytes
}使用Canvas精确绘制
对于需要完全控制打印位置的情况：
const printWithCanvas = () => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 210 * 3.78 // A4宽度mm转px
canvas.height = 297 * 3.78 // A4高度mm转px
ctx.font = '16px Arial'
ctx.fillText('打印内容', 50, 50)
const dataUrl = canvas.toDataURL('image/png')
const printWindow = window.open('', '_blank')
printWindow.document.write(`<img src="${dataUrl}" style="width:100%">`)
printWindow.print()
}注意事项
- 打印前使用
window.print()测试预览效果 - 不同浏览器打印效果可能有差异，需要进行兼容性测试
- 使用mm作为单位比px更精确
- 考虑添加打印按钮并处理打印回调
以上方法可根据实际需求组合使用，CSS方案适合简单套打，PDF方案适合高精度要求，Canvas方案适合完全自定义场景。
