Vue使用pdfjs-dist遇到的坑

1,324 阅读1分钟

最近需要做一个pdf文件转图片上传到服务器的功能,在安装pdfjs-dist上遇到花费了好多时间,记录一下我遇到的坑。

npm 安装: npm install pdfjs-dist

  1. 安装失败:npm install 报错 npm ERR code ERESOLVE npm ERR ERESOLVE unable to resolve dependency tree

    百度说,安装的插件已经存在或者和其他依赖有冲突,npm7.x比npm6.x更严格,因为没打算降级npm,所以尝试使用了npm i --legacy-peer-deps和npm i --force命令均无效。于是改为用cnpm安装,安装成功。

  2. 当cnpm安装成功后,以为可以顺利的使用了,但在引用时报错:


You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|

| async getXfa() {

> return this._transport._htmlForXfa?.children[this._pageIndex] || null;

| }

然后各种百度,尝试删除node_modules,清除缓存npm cache clean --force再重新安装npm install,无果,尝试单独重新安装插件无果。最后发现,package.json中pdfjs-dist版本与node_modules中pdfjs-dist文件package.json里的版本不对应,node_modules的版本是之前安装的版本,并没有安装package.json中版本。

查询原因:cnpm安装不完全按照package.json中的版本来,于是尝试安装node_modules中的版本,仍然报错 3. 继上述问题后,package.json中pdfjs-dist版本改为2.0.943版本,删除node_modules,清除缓存npm cache clean, 执行npm i ,查看node_modules中的版本和package.json中的一致!引入没报错

  1. 使用PDFJS.getDocument()时

需要设置PDFJS.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'