vue实现套打
Vue 实现套打功能
套打通常指在已有模板（如合同、票据）上动态填充数据并打印。以下是基于 Vue 的实现方案：
方案一：使用 CSS 控制打印样式
通过 CSS 的 @media print 定义打印时的隐藏/显示规则，结合 Vue 动态渲染数据。
<template>
<div class="print-template">
<!-- 固定模板内容 -->
<div class="template-header">固定表头</div>
<!-- 动态数据部分 -->
<div v-for="item in dataList" :key="item.id" class="data-row">
{{ item.content }}
</div>
</div>
<button @click="handlePrint">打印</button>
</template>
<script>
export default {
data() {
return {
dataList: [{ id: 1, content: "动态数据1" }]
};
},
methods: {
handlePrint() {
window.print();
}
}
};
</script>
<style>
@media print {
/* 隐藏非打印元素 */
button { display: none; }
/* 调整打印布局 */
.print-template { margin: 0; }
}
</style>方案二：PDF.js + 动态表单
若模板为 PDF 文件，可通过 PDF.js 渲染 PDF 并在指定位置叠加动态表单。
-
安装依赖：
npm install pdfjs-dist -
实现代码：
<template> <div> <div ref="pdfContainer"></div> <div class="form-fields"> <input v-model="formData.field1" placeholder="字段1"> </div> <button @click="generatePDF">生成打印文件</button> </div> </template>
export default { data() { return { formData: { field1: '' } }; }, methods: { async loadPDF() { const pdf = await pdfjsLib.getDocument('template.pdf').promise; const page = await pdf.getPage(1); const viewport = page.getViewport({ scale: 1.5 }); // 渲染到 canvas }, generatePDF() { // 使用 jsPDF 或其他库合并表单数据与 PDF } }, mounted() { this.loadPDF(); } };
```方案三：Canvas 精准定位
适用于需要像素级精准定位的套打场景。
export default {
methods: {
drawTemplate() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
// 绘制背景模板
const bgImg = new Image();
bgImg.src = 'template.png';
bgImg.onload = () => {
ctx.drawImage(bgImg, 0, 0);
// 在指定坐标绘制动态数据
ctx.fillText(this.formData.name, 100, 200);
};
},
printCanvas() {
const dataUrl = this.$refs.canvas.toDataURL('image/png');
const win = window.open();
win.document.write(`<img src="${dataUrl}" onload="window.print()">`);
}
}
};关键注意事项
- 打印样式调试：使用 Chrome 开发者工具的
Rendering > Emulate CSS media type模拟打印预览 - 分页控制：通过 CSS
page-break-before或page-break-after控制分页 - 模板对齐：实际打印前需测试模板与纸张的对齐情况，可能需要微调坐标
- 浏览器兼容性：不同浏览器对打印样式的解析存在差异，需跨浏览器测试
以上方案可根据具体需求组合使用，方案一适合简单套打，方案二适合复杂 PDF 模板，方案三适合需要高精度定位的场景。
