Win10 Chrome下点击按钮直接打印发票（跳过预览）的实现咨询

首先明确：这个需求需要Chrome浏览器设置配合JS代码才能实现——Chrome默认强制弹出打印预览，必须先让浏览器允许网站静默打印，再通过JS触发打印动作。下面是针对Windows 10 Chrome的具体步骤：

第一步：配置Chrome允许静默打印 #

这是核心前提，没有这个设置，任何JS代码都无法跳过预览：

• 打开Chrome浏览器，在地址栏输入 chrome://settings/content/printers 并回车
• 找到「允许网站跳过打印预览并直接打印」的选项，将其切换为开启状态
• 如果是企业办公环境，可联系IT管理员通过组策略批量配置这个选项，避免每个用户手动设置

第二步：优化JS打印代码（适配静默打印） #

假设你已有打印指定div的基础代码，这里调整为适配静默打印的版本，同时保证发票样式完整：

function printInvoice() {
  // 获取目标发票容器（替换成你的div ID）
  const invoiceContainer = document.getElementById('invoice-container');
  if (!invoiceContainer) return;

  // 创建隐藏iframe承载打印内容（避免干扰当前页面）
  const printIframe = document.createElement('iframe');
  printIframe.style.display = 'none';
  document.body.appendChild(printIframe);

  const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
  // 写入完整HTML结构，包含打印专属样式
  iframeDoc.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>发票打印</title>
      <style>
        /* 基础样式，根据你的发票格式调整 */
        body { 
          font-family: "Microsoft Yahei", sans-serif; 
          margin: 1cm; 
          line-height: 1.5;
        }
        .invoice-title { font-size: 18px; font-weight: bold; text-align: center; }
        .invoice-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .invoice-table td { border: 1px solid #333; padding: 8px; }
        /* 打印专属样式 */
        @media print {
          body { margin: 0.5cm; }
          @page { size: A4; margin: 0; }
        }
      </style>
    </head>
    <body>${invoiceContainer.innerHTML}</body>
    </html>
  `);
  iframeDoc.close();

  // 等待iframe加载完成后触发打印
  printIframe.onload = function() {
    // 关键：调用print()，此时浏览器已允许静默打印，会直接触发打印机
    printIframe.contentWindow.print();
    // 打印完成后清理iframe
    setTimeout(() => document.body.removeChild(printIframe), 1000);
  };
}

// 绑定提交按钮点击事件（替换成你的按钮ID）
document.getElementById('submit-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止表单默认提交（如果是表单按钮）
  printInvoice();
});

注意事项 #

• 本地测试限制：如果直接打开本地HTML文件（file://协议），Chrome可能因安全策略阻止静默打印，建议部署到本地服务器（比如用http-server）或线上环境测试
• 默认打印机设置：确保Windows默认打印机是你需要的发票打印机，否则会打印到默认设备
• 样式兼容性：务必在代码中包含打印专属样式（@media print），避免打印内容格式错乱

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