如何在Aurelia-cli中使用pdfjs？配置遇路径解析错误

我之前帮朋友搞定过Aurelia-cli集成pdf.js的问题，给你分享下亲测有效的步骤，应该能解决你遇到的文件路径找不到的问题：

1. 先搞定依赖安装 #

别手动下载pdf.js文件丢到public里！直接用包管理器安装官方的npm包，同时还要装worker-loader来处理pdf.js的worker文件：

npm install pdfjs-dist --save
npm install worker-loader --save-dev

2. 修改webpack配置文件 #

因为你用的是webpack版的Aurelia-cli，得在webpack.config.js里加两处配置：

• 第一处是添加worker文件的加载规则
• 第二处是给pdf.js设置别名，让webpack能正确解析路径

修改后的配置片段如下：

module.exports = {
  // ... 保留你原来的其他配置
  module: {
    rules: [
      // ... 保留你原来的其他规则
      {
        test: /pdf\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  },
  resolve: {
    alias: {
      'pdfjs-dist': 'pdfjs-dist/build/pdf.min.js',
      'pdfjs-dist/webpack': 'pdfjs-dist/build/pdf.worker.min.js'
    }
  }
};

3. 在Aurelia组件里正确使用 #

在你的view-model文件里，这样引入和初始化pdf.js：

import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/webpack';

// 先设置worker的路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// 示例：加载并渲染PDF
async loadAndRenderPdf() {
  // 注意：这里的PDF路径是相对于public文件夹的根路径，比如你把test.pdf放在public下，就写'/test.pdf'
  const pdfDoc = await pdfjsLib.getDocument('/test.pdf').promise;
  const firstPage = await pdfDoc.getPage(1);
  
  // 接下来可以根据你的需求渲染页面，比如获取画布上下文后调用firstPage.render()
}

为啥你会遇到路径错误？ #

你报错的/home/ubuntu/workspace/public/pdfjs-dist/build/pdf.js找不到，大概率是手动把pdf.js文件放到public目录下了。Aurelia-cli的webpack构建是从node_modules里读取依赖的，手动放文件会让webpack的路径解析逻辑混乱，按上面的步骤用npm安装+配置webpack就不会有这个问题了。

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