react-pdf本地引入pdf.worker.min.js

官网提供的示例

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中引入也没有问题，可以使用，之后引入Worker从pdfjs-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 ^)~~