React展示静态PDF遇阻：多款PDF组件包无法正常使用

首先，你遇到的ModuleParseError本质是因为你的打包工具（比如Webpack或者Create React App默认的打包配置）没有配置处理PDF文件的加载器——它只认识JS、CSS、图片这类常见文件格式，不知道该怎么解析PDF文件内容。下面分两种常见场景给你解决方案：

场景1：使用Create React App（CRA）创建的项目 #

CRA默认没有内置PDF的加载配置，你有两个简单的解决办法：

方法1：把PDF放到public文件夹，直接用URL引用 #

不需要import，直接用public文件夹的相对路径，这种方法最省心，不需要修改任何配置：

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

function PDFViewer() {
  return (
    <Document file="/my-pdf-file.pdf"> {/* 路径对应public文件夹下的文件位置 */}
      <Page pageNumber={1} />
    </Document>
  );
}

方法2：用craco修改CRA的webpack配置（如果一定要用import方式） #

1. 先安装必要依赖：

npm install @craco/craco file-loader --save-dev

2. 在项目根目录创建craco.config.js，添加PDF的加载规则：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.pdf$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'pdfs/', // 打包后PDF会放在build/pdfs目录下
            },
          },
        ],
      });
      return webpackConfig;
    },
  },
};

3. 修改package.json里的启动/打包命令，替换默认的react-scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 现在就能正常import本地PDF了：

import myPDF from './path/to/my-pdf-file.pdf';
import { Document, Page } from 'react-pdf';

function PDFViewer() {
  return (
    <Document file={myPDF}>
      <Page pageNumber={1} />
    </Document>
  );
}

场景2：自定义Webpack配置的项目 #

直接在webpack.config.js的module.rules里添加PDF的加载规则，用file-loader或者url-loader都可以：

module.exports = {
  // ...其他已有配置
  module: {
    rules: [
      // ...已有的其他加载规则
      {
        test: /\.pdf$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/[name].[hash].[ext]',
            },
          },
        ],
      },
    ],
  },
};

配置完重启webpack，就能正常导入本地PDF文件了。

另外补充个小细节：如果你用的是pdfjs-dist相关组件，要记得初始化它的worker路径，比如在组件里加这一行：

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

这一步被忽略时，也可能导致PDF加载失败。

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