当前位置：首页 > JavaScript

js套打实现

2026-02-02 22:03:56JavaScript

使用JavaScript实现套打功能

套打通常指在已有文档或图片上叠加打印内容，常见于票据、合同等场景。以下是几种实现方法：

方法一：Canvas叠加绘制 通过HTML5 Canvas将固定模板与动态内容叠加后打印：

// 加载模板图片
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const templateImg = new Image();
templateImg.src = 'template.png';

templateImg.onload = function() {
  canvas.width = templateImg.width;
  canvas.height = templateImg.height;

  // 绘制模板底图
  ctx.drawImage(templateImg, 0, 0);

  // 叠加动态内容
  ctx.font = '16px Arial';
  ctx.fillText('动态内容', 100, 100);

  // 触发打印
  const dataUrl = canvas.toDataURL('image/png');
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`<img src="${dataUrl}">`);
  printWindow.print();
};

方法二：CSS绝对定位叠加 使用HTML+CSS实现内容定位叠加：

<div class="template-container">
  <img src="template.png" class="template-bg">
  <div class="overlay-text" style="position:absolute; left:100px; top:100px;">
    动态打印内容
  </div>
</div>

<script>
function printOverlay() {
  window.print();
}
</script>

方法三：PDF库处理 使用PDF库如pdf-lib动态修改PDF模板：

js套打实现

import { PDFDocument } from 'pdf-lib';

async function fillPdfTemplate() {
  const templateBytes = await fetch('template.pdf').then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(templateBytes);
  const page = pdfDoc.getPage(0);

  page.drawText('动态内容', {
    x: 50,
    y: 50,
    size: 12,
  });

  const modifiedBytes = await pdfDoc.save();
  // 可通过浏览器打印API处理
}

关键注意事项

精确对齐

需要测量模板内容的精确位置坐标
建议使用专业设计工具获取元素坐标
不同DPI设备可能需要调整坐标

打印样式控制 使用CSS控制打印输出：

js套打实现

@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}

浏览器兼容性