React中<object>加载PDF时事件处理器失效问题求助

问题原因 #

• <object>标签的事件模型和常规DOM元素存在差异，浏览器对嵌入的外部资源（如PDF）有沙箱隔离机制，React的合成事件系统无法正常捕获它的onError、onLoadedMetadata事件。
• 你看到的onLoadedData匿名函数生效只是个别浏览器的特殊表现，不具备通用性；另外onLoadedMetadata本身是音视频元素的专属事件，<object>标签并不支持该事件。

解决办法 #

办法一：手动绑定原生DOM事件 #

通过React的ref获取<object>元素实例，在组件挂载后手动添加原生事件监听，卸载时移除监听避免内存泄漏：

class MyPDF extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMsg: null
    };
    this.objectRef = React.createRef();
    this.onDocumentErrorLoad = this.onDocumentErrorLoad.bind(this);
    this.handleLoad = this.handleLoad.bind(this);
  }

  componentDidMount() {
    const objectEl = this.objectRef.current;
    if (objectEl) {
      // 绑定原生错误事件
      objectEl.addEventListener('error', this.onDocumentErrorLoad);
      // 绑定原生加载完成事件（替代onLoadedMetadata）
      objectEl.addEventListener('load', this.handleLoad);
    }
  }

  componentWillUnmount() {
    const objectEl = this.objectRef.current;
    if (objectEl) {
      // 移除事件监听，防止内存泄漏
      objectEl.removeEventListener('error', this.onDocumentErrorLoad);
      objectEl.removeEventListener('load', this.handleLoad);
    }
  }

  setErrorMsg(msg) {
    this.setState({
      errorMsg: msg
    });
  }

  onDocumentErrorLoad(event) {
    console.log("fine1");
    this.setErrorMsg("Error: " + event.message);
  }

  handleLoad(event) {
    console.log("fine2");
    // 此处可处理PDF加载完成后的逻辑
  }

  render() {
    return (
      <>
        {this.state.errorMsg && <div>{this.state.errorMsg}</div>}
        <object
          ref={this.objectRef}
          height="500"
          data={"httpssss://gooogle.come"}
          type="application/pdf"
        />
      </>
    );
  }
}

办法二：使用专业PDF渲染库 #

如果需要更稳定的PDF加载、渲染和事件处理，推荐使用react-pdf这类封装好的库，它基于PDF.js实现，能可靠触发各类加载事件：

import { Document, Page } from 'react-pdf';

class MyPDF extends React.Component {
  state = {
    errorMsg: null,
    numPages: null,
  };

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
    console.log("PDF加载成功，总页数：", numPages);
  };

  onDocumentLoadError = (error) => {
    this.setState({ errorMsg: error.message });
    console.log("fine1", error);
  };

  render() {
    const { errorMsg, numPages } = this.state;
    return (
      <>
        {errorMsg && <div>{errorMsg}</div>}
        <Document
          file={"httpssss://gooogle.come"}
          onLoadSuccess={this.onDocumentLoadSuccess}
          onLoadError={this.onDocumentLoadError}
        >
          <Page pageNumber={1} />
        </Document>
      </>
    );
  }
}

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