js套打实现
套打实现的基本概念
套打(Template Printing)是指在已有模板(如PDF、Word等)的固定位置动态填充数据并打印的技术。在JavaScript中,通常通过操作DOM或PDF库实现。
前端HTML+CSS套打方案
使用HTML和CSS精确控制打印样式,适合简单套打需求:
<style>
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}
</style>
<div class="print-area">
<div style="position: absolute; left: 50mm; top: 30mm;">
动态数据内容
</div>
</div>
通过@media print媒体查询控制打印时的元素显示,使用绝对定位精确控制内容位置。
PDF套打实现方案
对于PDF模板套打,常用PDF库处理:
使用pdf-lib库示例:
import { PDFDocument, rgb } from 'pdf-lib';
async function fillPDFTemplate() {
const url = 'template.pdf';
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
const pages = pdfDoc.getPages();
const firstPage = pages[0];
firstPage.drawText('动态文本', {
x: 50,
y: 500,
size: 12,
color: rgb(0, 0, 0),
});
const pdfBytes = await pdfDoc.save();
// 下载或打印处理
}
关键点:
- 加载现有PDF模板
- 获取页面对象后在指定坐标绘制文本
- 支持字体嵌入、图像插入等操作
打印控制技术
实现精确打印控制:
function printDocument() {
const printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>打印</title>');
printWindow.document.write('<link rel="stylesheet" href="print.css">');
printWindow.document.write('</head><body>');
printWindow.document.write(document.getElementById('print-area').innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
setTimeout(() => {
printWindow.print();
printWindow.close();
}, 500);
}
第三方库推荐
-
jsPDF - 生成PDF文档
const doc = new jsPDF(); doc.text('文本', 10, 10); doc.save('document.pdf'); -
PDFKit - Node.js和浏览器PDF生成
-
Puppeteer - 控制Headless Chrome打印网页
-
React-PDF - React环境的PDF组件

注意事项
- 打印尺寸单位转换:1英寸=72点,1cm≈28.35点
- 不同浏览器打印效果可能存在差异,需测试兼容性
- 高精度套打建议使用PDF方案而非HTML方案
- 商业系统推荐使用专业报表工具如Crystal Reports、FastReport等
完整实现流程示例(PDF套打)
- 准备PDF模板文件,记录所有字段坐标位置
- 前端收集用户输入数据
- 使用pdf-lib加载模板并填充数据
- 生成最终PDF文件供下载或直接打印
- 添加打印按钮调用浏览器打印API
// 示例坐标配置
const fields = {
name: { x: 100, y: 200 },
date: { x: 300, y: 150 }
// 其他字段坐标...
};
通过以上方法组合,可以实现从简单到复杂的各种套打需求。






