如何用PrintJS同会话打印多页？循环打印仅出最后一页求助

我之前也碰到过一模一样的问题，折腾了好一阵才搞明白核心原因，结合我的实践经验给你分享下解决方案：

为什么会只输出最后一份？ #

PrintJS本质上是基于浏览器原生的window.print() API实现的，而这个API有两个关键特性：

• 异步阻塞：触发打印后，浏览器会弹出打印对话框，此时后续的JS代码会被暂停，直到用户手动关闭对话框
• 任务队列覆盖：如果在循环里快速连续调用多次PrintJS，浏览器还没来得及处理前一次的打印请求，后一次的调用就会覆盖掉前一次的任务，最终只有最后一次的打印任务能被执行

你提到循环内部是调用另一个函数而非直接用索引，那基本可以确定就是这个异步阻塞+任务队列覆盖的问题，和索引无关。

可行的解决方案 #

方案1：用递归代替循环（最推荐） #

递归可以确保前一次打印完全完成（用户关闭对话框）后，再触发下一次打印，从根本上避免任务覆盖。示例代码如下：

// 递归打印函数，total是总份数，current是当前打印的份数
function printMultipleCopies(totalCopies, currentCopy = 1) {
  // 终止条件：当前份数超过总份数就停止
  if (currentCopy > totalCopies) return;

  // 调用你的票据打印函数（就是你原来循环里调用的那个函数）
  renderAndPrintTicket();

  // 监听打印完成事件，完成后递归调用下一次
  window.addEventListener('afterprint', function handlePrintFinish() {
    // 一定要移除监听，避免重复触发
    window.removeEventListener('afterprint', handlePrintFinish);
    printMultipleCopies(totalCopies, currentCopy + 1);
  });
}

// 调用示例：打印5份票据
printMultipleCopies(5);

方案2：用Promise封装打印操作 #

把PrintJS的打印过程封装成Promise，再用async/await按顺序执行，逻辑更清晰：

// 封装打印为Promise
function printTicketAsPromise() {
  return new Promise((resolve) => {
    // 执行PrintJS打印，这里替换成你的实际配置
    printJS({
      printable: 'ticket-container', // 你的票据DOM元素ID
      type: 'html',
      // 其他PrintJS配置项...
    });

    // 打印完成后resolve Promise
    window.addEventListener('afterprint', function onPrintDone() {
      window.removeEventListener('afterprint', onPrintDone);
      resolve();
    });
  });
}

// 异步循环打印
async function printTotalCopies(total) {
  for (let i = 1; i <= total; i++) {
    // 等待当前打印完成后，再执行下一次
    await printTicketAsPromise();
  }
}

// 调用示例
printTotalCopies(3);

方案3：手动添加延迟（不推荐，仅作备选） #

如果不想改递归或Promise，也可以给每次打印之间加固定延迟，但这种方式很不稳定——因为用户关闭对话框的时间不确定，延迟设短了还是会出现覆盖，设长了用户体验差：

function printMultipleCopies(total) {
  let current = 0;
  const printInterval = setInterval(() => {
    current++;
    renderAndPrintTicket();

    if (current >= total) {
      clearInterval(printInterval);
    }
  }, 3000); // 3秒延迟，可根据实际情况调整
}

额外注意事项 #

• 不同浏览器对afterprint事件的支持略有差异，建议在Chrome、Firefox、Edge等主流浏览器都测试一遍
• 如果你的票据内容是动态生成的，要确保每次调用打印函数时，内容都是最新的，避免闭包导致的内容重复问题
• 绝对不要在同步循环里直接连续调用printJS()，一定要等待前一次打印完成后再触发下一次

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