基于webpack的React项目配置PDFTron时查看器无法加载问题求助

基础问题排查 #

• 不需要手动在index.html中引入webviewer.min.js，@pdftron/webviewer的内部加载逻辑会自动从你配置的path路径下拉取所需资源。
• 你遇到的报错无法读取未定义对象的属性 'addEventListener'，90%的情况是你调用WebViewer初始化时漏传了第二个参数：要挂载查看器的DOM节点。

路径配置修正 #

你已经将包含core、ui文件夹的PDFTron静态资源复制到dist目录下，需要确认两点：

1. 静态资源的目录层级是否正确：如果资源放在dist/public下，那么直接在浏览器地址栏访问http://<你的开发服务地址>/public/core/webviewer.min.js应该能正常获取到js文件，打不开则说明路径配置错误。
2. 如果不想每次手动复制资源，可配置copy-webpack-plugin实现构建/开发时自动复制资源，webpack配置示例如下：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其余webpack配置
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/@pdftron/webviewer/public',
          to: 'webviewer-static' // 自定义输出到dist下的目录名
        }
      ]
    })
  ],
  devServer: {
    static: './dist', // 确保开发服务将dist作为静态资源根目录
    port: 3000
  }
}

对应初始化的path字段改为/webviewer-static即可。

完整初始化代码示例 #

你需要先创建DOM引用传给WebViewer作为挂载节点，完整组件代码如下：

import { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';

const PdfViewer = () => {
  const viewerDomRef = useRef(null);

  useEffect(() => {
    // 确保DOM节点已渲染再初始化
    if (!viewerDomRef.current) return;

    WebViewer({
      path: '/webviewer-static', // 对应你配置的静态资源路径
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf'
    }, viewerDomRef.current) // 必须传入第二个参数：挂载的DOM节点
    .then(instance => {
      // 你的后续查看器操作逻辑
    })
  }, []);

  // 必须给挂载节点设置宽高，否则查看器无法正常渲染
  return <div ref={viewerDomRef} style={{ width: '100%', height: 800 }} />
}

export default PdfViewer;

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