寻求网页表单坐标定位打印功能的实现脚本与代码

一、前端Canvas实时预览打印方案 #

适合在网页上直接实现表单数据与申请表底图的叠加预览，支持直接打印。

实现步骤： #

1. 准备申请表底图（PNG/JPG格式），提前测量姓名、地址、电话等字段的放置坐标（以图片左上角为原点）。
2. 页面嵌入Canvas元素，加载底图后根据表单输入值在对应坐标绘制文本。
3. 绑定表单提交事件，实时更新Canvas内容，提供打印按钮触发浏览器打印功能。

代码示例： #

<!-- HTML结构 -->
<form id="applicationForm">
  <input type="text" id="name" placeholder="姓名">
  <input type="text" id="address" placeholder="地址">
  <input type="text" id="phone" placeholder="电话">
  <button type="button" onclick="renderForm()">预览</button>
  <button type="button" onclick="printCanvas()">打印</button>
</form>
<canvas id="formCanvas" width="800" height="1100"></canvas>

<script>
// 预设坐标（根据实际底图调整）
const fieldPositions = {
  name: { x: 200, y: 150, fontSize: 16, font: 'Arial' },
  address: { x: 200, y: 220, fontSize: 16, font: 'Arial' },
  phone: { x: 200, y: 290, fontSize: 16, font: 'Arial' }
};

function renderForm() {
  const canvas = document.getElementById('formCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  
  img.onload = function() {
    // 绘制底图
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    // 获取表单值
    const formData = {
      name: document.getElementById('name').value,
      address: document.getElementById('address').value,
      phone: document.getElementById('phone').value
    };
    
    // 绘制文本
    Object.keys(fieldPositions).forEach(key => {
      const pos = fieldPositions[key];
      ctx.font = `${pos.fontSize}px ${pos.font}`;
      ctx.fillStyle = '#000';
      ctx.fillText(formData[key], pos.x, pos.y);
    });
  };
  
  // 加载申请表底图（替换为实际图片路径）
  img.src = 'application-template.png';
}

function printCanvas() {
  const canvas = document.getElementById('formCanvas');
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`<img src="${canvas.toDataURL()}" style="width:100%;">`);
  printWindow.document.close();
  printWindow.print();
}
</script>

二、PDF模板填充方案 #

适合生成标准化可下载的PDF申请表，打印效果更精准，无需依赖浏览器渲染。

实现步骤： #

1. 用PDF编辑工具（如Adobe Acrobat）制作申请表模板，标记各字段坐标；或直接使用空白底图PDF。
2. 使用前端PDF库（如pdf-lib）加载模板PDF，根据预设坐标写入表单数据。
3. 生成填充后的PDF，支持预览或下载。

代码示例（使用pdf-lib）： #

<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<form id="pdfForm">
  <input type="text" id="pdfName" placeholder="姓名">
  <input type="text" id="pdfAddress" placeholder="地址">
  <input type="text" id="pdfPhone" placeholder="电话">
  <button type="button" onclick="generatePDF()">生成PDF</button>
</form>

<script>
async function generatePDF() {
  // 加载PDF模板（替换为实际模板路径）
  const templateUrl = 'application-template.pdf';
  const templateBytes = await fetch(templateUrl).then(res => res.arrayBuffer());
  
  const pdfDoc = await PDFLib.PDFDocument.load(templateBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];
  
  // 预设坐标（单位为点，1英寸=72点，根据PDF页面尺寸调整）
  const fieldPositions = {
    name: { x: 144, y: 720, fontSize: 12, font: 'Helvetica' },
    address: { x: 144, y: 670, fontSize: 12, font: 'Helvetica' },
    phone: { x: 144, y: 620, fontSize: 12, font: 'Helvetica' }
  };
  
  // 获取表单值
  const formData = {
    name: document.getElementById('pdfName').value,
    address: document.getElementById('pdfAddress').value,
    phone: document.getElementById('pdfPhone').value
  };
  
  // 嵌入标准字体
  const helveticaFont = await pdfDoc.embedFont(PDFLib.StandardFonts.Helvetica);
  
  // 写入文本
  Object.keys(fieldPositions).forEach(key => {
    const pos = fieldPositions[key];
    firstPage.drawText(formData[key], {
      x: pos.x,
      y: pos.y,
      size: pos.fontSize,
      font: helveticaFont,
      color: PDFLib.rgb(0, 0, 0)
    });
  });
  
  // 生成并下载PDF
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'filled-application.pdf';
  a.click();
  URL.revokeObjectURL(url);
}
</script>

三、后端图片合成方案 #

适合需要服务器端生成并存储申请表的场景，可通过后端语言直接合成图片或PDF。

Python + Pillow示例： #

from PIL import Image, ImageDraw, ImageFont

# 加载申请表底图
template_img = Image.open('application-template.png')
draw = ImageDraw.Draw(template_img)

# 预设坐标（根据图片尺寸调整）
field_positions = {
    'name': (200, 150),
    'address': (200, 220),
    'phone': (200, 290)
}

# 表单数据（实际从请求中获取）
form_data = {
    'name': '张三',
    'address': 'XX市XX区XX路XX号',
    'phone': '138XXXX1234'
}

# 设置字体（替换为实际字体路径）
font = ImageFont.truetype('arial.ttf', 16)

# 绘制文本
for field, (x, y) in field_positions.items():
    draw.text((x, y), form_data[field], font=font, fill=(0, 0, 0))

# 保存合成后的图片
template_img.save('filled-application.png')

# 如需生成PDF，可结合pdfkit等库实现

内容的提问来源于stack exchange，提问作者JSta1n