Chrome控制台批量点击按钮后合并多页打印的实现问询

问题根源 #

浏览器的window.print()是模态操作，触发后会阻塞后续代码执行，所以批量点击打印按钮时，只有第一个能弹出预览，后续操作会被卡住无法执行。

可行解决方案 #

1. 延迟逐个触发打印预览 #

给每个打印操作设置递增延迟，让浏览器有足够时间处理完上一个预览窗口，再触发下一个。示例代码：

// 替换成实际的打印按钮选择器，比如'.pick-list-print-btn'
const printButtons = document.querySelectorAll('.print-btn');

// 间隔2秒触发一次，可根据实际加载速度调整
printButtons.forEach((btn, index) => {
  setTimeout(() => {
    btn.click();
    // 如果按钮绑定的是直接调用print，也可以替换为window.print()
  }, index * 2000);
});

注：此方法仍需手动逐个确认打印，适合打印数量较少的场景

2. 合并所有发票内容到新窗口统一打印 #

如果能定位到发票的DOM容器，可以把所有发票内容合并到一个新窗口，实现一次预览、批量打印。示例代码：

// 替换成实际的发票容器选择器，比如'.invoice-item'
const invoiceElements = document.querySelectorAll('.invoice-container');
const printWindow = window.open('', '_blank');

// 拼接所有发票的HTML，添加分页样式
const combinedContent = `
<!DOCTYPE html>
<html>
<head>
  <title>批量发票打印</title>
  <style>
    /* 复制原页面的发票样式，确保打印格式一致 */
    .invoice-container { margin-bottom: 2cm; page-break-after: always; }
  </style>
</head>
<body>
  ${Array.from(invoiceElements).map(el => el.outerHTML).join('')}
</body>
</html>
`;

printWindow.document.write(combinedContent);
printWindow.document.close();

// 等待新窗口加载完成后触发打印
printWindow.onload = () => {
  printWindow.print();
  // 可选：打印完成后自动关闭窗口
  // printWindow.close();
};

注：需要准确匹配发票的DOM结构，确保样式能正确复用，否则打印格式可能出错

3. 关于静默打印（无预览直接打印） #

浏览器出于安全限制，不允许前端代码直接触发无预览的静默打印——这是为了防止恶意网站未经用户同意发起打印操作。除非是企业级环境配置了Chrome kiosk模式，或者安装了经过用户授权的打印扩展，否则仅通过Console无法实现。

额外注意事项 #

• 如果打印按钮点击后需要异步加载发票内容，需添加等待逻辑（比如用MutationObserver监听内容加载完成），避免触发打印时内容未就绪。
• 测试时先选择2-3条数据验证逻辑，避免批量操作出错。

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