如何用JavaScript实现信封地址批量打印及修复多页后位置偏移问题

问题原因 #

多页打印偏移的核心是依赖动态padding累计控制每页高度，浏览器打印渲染的默认边距、流式布局跨页拆分误差会随页数增加不断累积，叠加原有代码的语法错误、布局方案不匹配固定尺寸打印场景，最终出现偏移。你尝试固定调整padding无效是因为打印渲染的误差是浮动的，没有固定的偏移量可以匹配。

解决方案 #

调整要点 #

• 修复基础语法错误：删除@page规则中重复的size:声明，修正错误闭合标签</3html>为</html>
• 废弃动态padding高度控制方案，给每个信封设置和页面尺寸一致的固定容器，添加page-break-after: always强制分页，每个信封独立占一页，完全避免高度累计误差
• 信封内部的寄件、收件地址用固定边距定位，不依赖空p标签撑高度，打印尺寸统一用英寸单位避免屏幕DPI差异影响

修复后代码示例 #

function combineSenderInfo(){
  // 直接返回固定定位的寄件人信息，不需要额外padding
  return `<div style="position: absolute; top: 0.2in; left: 0.2in;">
    <h5></h5>
    <br>
    1107 Test Av<br>
    Test, Pa 19111<br>
  </div>`;
}

function combineReceiverInfo(recieverData){
  // 收件人固定在信封中间位置，不需要动态边距
  return `<div style="position: absolute; top: 1.5in; left: 50%; transform: translateX(-50%); max-width: 5in;">
    <h3>${recieverData.name}</h3>
    <h3>
      ${recieverData.address1}<br>
      ${recieverData.address2}<br>
      ${recieverData.phone}
    </h3>
  </div>`;
}

function AddressesPrintManager(MassAddressDict){
  const printWindow = window.open('', '', 'height=600,width=800');
  printWindow.document.write(`
    <html>
    <head>
    <title>信封打印</title>
    <style>
      * { font-family: sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
      @media print {
        @page { 
          size: 9.5in 4.5in landscape;
          margin: 0; 
        }
        /* 强制每个信封分页，避免跨页拆分 */
        .envelope {
          page-break-after: always;
          page-break-inside: avoid;
        }
      }
      /* 每个信封尺寸和页面完全一致，内部用绝对定位放内容 */
      .envelope {
        width: 9.5in;
        height: 4.5in;
        position: relative;
      }
    </style>
    </head>
    <body>
  `);

  Object.values(MassAddressDict).forEach((receiverData, index) => {
    const senderInfo = combineSenderInfo();
    const receiverInfo = combineReceiverInfo(receiverData);
    printWindow.document.write(`<div class="envelope" id="label${index}">${senderInfo}${receiverInfo}</div>`);
  });

  printWindow.document.write('</body></html>');
  printWindow.document.close();
  // 等待资源加载完成再打印，避免渲染不全
  printWindow.onload = () => printWindow.print();
}

内容的提问来源于stack exchange，提问作者e.iluf