如何在Vue CLI TypeScript项目中使用pdfjs-dist？

错误原因 #

你使用的pdfjs-dist@2.8+版本源码中使用了ES2020可选链?.语法，而Vue CLI 4默认依赖的Webpack 4不会主动转译node_modules下第三方包的新语法，因此解析到可选链符号时直接抛出解析失败错误。

解决步骤 #

1. 安装依赖 #

如果项目未安装worker-loader，先执行安装命令：

npm install worker-loader -D
# 或使用yarn
yarn add worker-loader -D

2. 修改vue.config.js配置 #

在项目根目录的vue.config.js中添加如下配置：

module.exports = {
  // 原有配置保持不变，新增以下内容
  // 将pdfjs-dist加入babel转译列表，转译其内部的新语法
  transpileDependencies: ['pdfjs-dist'],
  chainWebpack: config => {
    // 配置worker加载规则，解决pdfjs worker加载报错问题
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end()
  }
}

3. 调整组件内pdfjs引入逻辑 #

修改组件中pdfjs的引入代码，手动指定worker源：

// 原有引入替换为以下内容
import * as PDFJS from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker

4. 修复代码逻辑问题 #

你现有代码中base64处理逻辑有误，replace方法不能直接作用在Uint8Array实例上，调整getPdf方法对应代码：

async getPdf() {
  // 先处理base64前缀，再转Uint8Array
  const rawBase64 = this.pdfBase64?.replace("data:application/pdf;base64,", "") || ''
  const pdfData = this.base64ToUint8Array(rawBase64);
  // 后续原有逻辑保持不变
  const loadingTask = PDFJS.getDocument(pdfData);
  loadingTask.promise.then(function(pdf) {
    // ... 原有代码不变
  })
}

所有配置修改完成后，重启本地开发服务即可正常运行。

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