使用React.js与react-pdf库时IE 11中window.print()无法正常工作

我之前也碰到过一模一样的问题，IE浏览器对打印操作的逻辑和现代浏览器差异很大，再加上react-pdf的异步渲染特性，直接在componentDidUpdate里调用打印十有八九会因为PDF内容还没加载完而失效。下面是针对性的解决方案：

核心问题拆解 #

• IE对打印的触发时机要求极严，必须等所有要打印的DOM内容完全渲染完毕才能调用window.print()
• componentDidUpdate仅代表React组件本身更新完成，但react-pdf的Document和Page是异步解析加载PDF内容的，此时PDF内容大概率还没渲染到DOM里
• IE对非用户主动触发的打印操作（比如组件生命周期自动调用）存在隐性限制

重构后的可行代码 #

我们需要监听react-pdf的加载完成事件，确保PDF内容完全渲染后再触发打印，同时针对IE做兼容性延迟处理：

import { Document, Page } from "react-pdf/build/entry.noworker";

class PrintFile extends React.Component {
  constructor(props) {
    super(props);
    this.printableRef = React.createRef();
  }

  // 监听PDF加载完成，确保内容渲染完毕再打印
  handlePDFReady = () => {
    // 给IE额外加延迟，适配它较慢的DOM渲染速度
    const delay = navigator.userAgent.includes('Trident') ? 500 : 0;
    
    setTimeout(() => {
      // 聚焦打印区域，解决IE偶尔打印空白的问题
      this.printableRef.current?.focus();
      window.print();
    }, delay);
  };

  render() {
    const { pdfFile } = this.props;
    return (
      <DocumentTitle title={pdfFile.name}>
        <div id="printable" ref={this.printableRef}>
          <Document 
            file={pdfFile} 
            onLoadSuccess={this.handlePDFReady} // 关键：PDF加载完成后再触发打印
          >
            {/* 这里替换成你的Page组件逻辑 */}
            <Page pageNumber={1} />
          </Document>
        </div>
      </DocumentTitle>
    );
  }
}

额外的IE兼容性优化项 #

• 打印样式适配：给打印区域添加专门的CSS，确保IE能正确识别打印内容：

@media print {
  body * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;
  }
  #printable {
    position: absolute;
    left: 0;
    top: 0;
  }
}

• 用户主动触发兜底：如果IE仍然阻止自动打印，可以添加一个打印按钮，让用户主动点击触发——IE对用户交互触发的打印兼容性好很多：

// 在render中添加按钮
<button onClick={this.handlePDFReady}>点击打印PDF</button>

• 版本兼容检查：确保你用的react-pdf版本支持IE，较新的v6+版本已经放弃了IE支持，建议回退到v5.x版本（如果必须兼容IE）

原代码失效的原因 #

原来的componentDidUpdate会在组件props/state更新后立即执行，但此时react-pdf还在异步加载解析PDF内容，IE浏览器还没来得及把PDF内容绘制到DOM中，所以调用window.print()时打印的是空内容或者未渲染完成的内容。

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