如何在React.js中静默打印PDF文件？

要实现不打开新标签页直接打印PDF，可以通过隐藏iframe嵌入PDF的方式，加载完成后直接打印iframe内容，具体实现如下：

const pdfURL = "someurl.com/document.pdf";

const handlePrint = (e: React.FormEvent) => {
  e.preventDefault();
  
  // 创建隐藏的iframe元素
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = pdfURL;

  // 监听PDF加载完成事件，触发打印
  iframe.onload = () => {
    // 调用iframe内容窗口的打印方法
    iframe.contentWindow?.print();
    
    // 打印完成后移除iframe，避免DOM冗余
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 1000);
  };

  // 处理PDF加载失败的情况
  iframe.onerror = () => {
    console.error('PDF文件加载失败');
    document.body.removeChild(iframe);
  };

  // 将iframe添加到页面DOM中
  document.body.appendChild(iframe);
};

关键说明： #

• 利用隐藏的iframe加载PDF，全程在当前页面完成，不会弹出新标签页
• 加载完成后调用iframe.contentWindow?.print()，直接触发PDF的打印对话框
• 打印后延迟移除iframe，确保打印操作顺利完成
• 若遇到跨域报错，需要确保PDF所在服务器配置了CORS，允许当前页面域名访问该PDF资源

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