如何在Electron中用react-to-print静默打印React组件至默认打印机

首先需要明确：普通网页出于浏览器安全策略限制，无法直接跳过打印对话框，这是为了防止恶意网站未经用户许可触发打印操作。但在受控环境（如企业内部应用、可自定义浏览器启动参数的场景）下，可以通过以下方式实现需求：

方案1：通过Chrome浏览器启动参数实现（受控环境） #

如果你的应用运行在可以控制浏览器启动方式的环境中，给Chrome添加--kiosk-printing启动参数，这样调用window.print()时会直接使用默认打印机打印，不会弹出系统打印对话框。

你的现有代码无需修改，只需确保浏览器以该参数启动，点击打印按钮即可直接打印。

方案2：自定义打印逻辑（仅适用于支持特定API的浏览器，需实验性特性） #

部分浏览器（如Chrome 86+）提供了实验性的打印API支持无对话框打印，但需要用户手动开启浏览器的实验性功能：

1. 打开Chrome浏览器，输入chrome://flags/#enable-experimental-web-platform-features并回车
2. 将该选项设置为Enabled，重启浏览器

然后修改你的handlePrint配置，自定义打印函数：

import { useReactToPrint } from 'react-to-print';  
import { useRef } from 'react'; // 补充useRef的导入

const printsRef = useRef()

const handlePrint = useReactToPrint({
  content: () => printsRef.current,
  pageStyle: `
    @page {
      size: auto; 
      width: 80mm; 
      height: 1000mm; 
      margin-top: 0cm; 
      margin-right: 0mm;
      margin-bottom: 0cm;
      margin-left: 0cm;
    }
  `,
  // 自定义打印函数，使用实验性API实现无对话框打印
  print: async (target) => {
    // 创建隐藏iframe加载打印内容
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
    // 复制目标内容到iframe并应用样式
    iframeDoc.body.innerHTML = target.innerHTML;
    const style = document.createElement('style');
    style.textContent = `
      @page {
        size: auto; 
        width: 80mm; 
        height: 1000mm; 
        margin-top: 0cm; 
        margin-right: 0mm;
        margin-bottom: 0cm;
        margin-left: 0cm;
      }
    `;
    iframeDoc.head.appendChild(style);
    
    // 等待内容加载完成
    await new Promise(resolve => iframe.onload = resolve);
    
    // 尝试使用无对话框打印API，失败则回退到默认方式
    try {
      await iframe.contentWindow.print({ silent: true });
    } catch (e) {
      iframe.contentWindow.print();
    }
    
    // 清理iframe
    document.body.removeChild(iframe);
  }
})

注意：这个方案依赖浏览器实验性特性，不适合面向普通用户的生产环境，仅适用于内部受控场景。

方案3：浏览器扩展实现（通用场景，但需用户安装扩展） #

如果需要在普通浏览器环境下实现无对话框打印，可以开发Chrome扩展，利用Chrome的chrome.printing API直接调用默认打印机。这种方式需要用户安装你的扩展，且扩展需申请printing权限。

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