基于React的两种方式使用React-pdf

官网提供两种方式使用,但是直接使用可能存在问题,下面是官网提供的:

第一种方式:这段脚本是将node_modules/pdfjs-dist/build文件夹下的pdf.worker.mjs拷贝到项目的项目的输出文件夹

import path from 'node:path';
import fs from 'node:fs';

const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs');

fs.cpSync(pdfWorkerPath, './dist/pdf.worker.mjs', { recursive: true });


第二种方式:这里需要在使用react-pdf的组件中引入
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc=`//unpkg.com/pdfjsdist@${pdfjs.version}/build/pdf.worker.min.mjs`;

首先存在的问题:

  1. 使用的pnpm的话,需要额外创建配置一个.npmrc文件,复制ist-pattern[]=pdfjs-dist进去。因为pnpm 的包管理方式与 npm/yarn 不同。它使用一种类似符号链接的机