官网提供的示例

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

使用官方提供的的链接引入worker可能会存在加载错误的问题,可能由于服务器的问题导致,所以使用本地引入可以很好的避免这类问题;
本地引入示例代码

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min';

我使用的是webpack5,官方推荐从react-pdf/dist/esm/entry.webpack5中引入,但是直接从react-pdf中引入也没有问题,可以使用,之后引入Workerpdfjs-dist/build/pdf.worker.min;但是按照官方的写法需要加载到pdfjs.GlobalWorkerOptions.workerSrc上面去,首先想到的是从pdfjs-dist/build/pdf.worker.min中引入之后直接赋值

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min';
// 这样赋值会报错
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

后来发现Document组件提供了一个属性options,可以使用该属性来加载文件,代码如下:

 <Document
    file={pdfFile}
    onLoadSuccess={onDocumentLoadSuccess}
    options={{ workerSrc: pdfjsWorker }}
  >
    <Page scale={1} pageNumber={pageNumber} />
 </Document>

这样的好处再与不用请求官方提供的url了,对worker稳定获取很有帮助,不好的地方在于文件有点大,将近1M的大小会打包到项目;
我是ts项目,再引入pdfjs-dist/build/pdf.worker.min会报错,原因是没有对应的声明文件,加上声明文件就好了,代码如下:

declare module 'pdfjs-dist/build/pdf.worker.min';

还有一种方法,可以将该文件放在自家服务器上,访问也会稳定一些;

好了,希望可以帮到大家,散会~~(^ v ^)~~

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐