如何在Angular应用中离线安装ng2-pdfjs-viewer及生产构建

一、预先准备离线安装包 #

在有网络的环境下，先获取ng2-pdfjs-viewer及其依赖的离线包：

• 方式1：生成tgz包
  执行npm pack ng2-pdfjs-viewer，会在当前目录生成ng2-pdfjs-viewer-x.x.x.tgz（x.x.x为实际版本号），同理执行npm pack pdfjs-dist获取依赖的离线包，将这两个tgz文件保存到本地离线目录（比如项目根目录下的offline-packages文件夹）。
• 方式2：复制已安装的包
  新建临时Angular项目，执行npm install ng2-pdfjs-viewer，安装完成后，从node_modules中复制ng2-pdfjs-viewer和pdfjs-dist两个文件夹到本地离线目录。

二、离线安装到目标Angular项目 #

• 若使用tgz包：在目标项目根目录执行npm install ./offline-packages/ng2-pdfjs-viewer-x.x.x.tgz和npm install ./offline-packages/pdfjs-dist-x.x.x.tgz，替换版本号为实际值。
• 若使用复制的文件夹：执行npm install ./offline-packages/ng2-pdfjs-viewer和npm install ./offline-packages/pdfjs-dist。
• 安装完成后，依赖会写入package.json，后续无需重复联网安装。

三、配置并使用组件 #

1. 在模块中导入组件
   修改app.module.ts，导入并注册Ng2PdfjsViewerModule：

   import { Ng2PdfjsViewerModule } from 'ng2-pdfjs-viewer';
   
   @NgModule({
     imports: [
       // 其他模块（如BrowserModule等）
       Ng2PdfjsViewerModule
     ]
   })
   export class AppModule { }
   

2. 在模板中使用组件
   在需要展示PDF的组件模板（如app.component.html）中添加：

   <ng2-pdfjs-viewer 
     [src]="'assets/demo.pdf'" 
     [viewer]="{toolbar: true, zoom: 'page-fit'}"
   ></ng2-pdfjs-viewer>
   

   注意：将PDF文件放入项目assets目录，并确保angular.json的assets配置包含该文件（默认已包含整个assets目录）。

四、离线生产环境构建 #

1. 锁定依赖来源
   为避免后续误联网下载，可在package.json中直接指定本地包路径：

   "dependencies": {
     // 其他依赖
     "ng2-pdfjs-viewer": "file:./offline-packages/ng2-pdfjs-viewer-x.x.x.tgz",
     "pdfjs-dist": "file:./offline-packages/pdfjs-dist-x.x.x.tgz"
   }
   

   这样执行npm install时会直接从本地加载，无需联网。
2. 执行离线构建
   确保所有依赖已通过离线安装完成，执行生产构建命令：

   ng build --configuration production
   

   （Angular 12及以下可使用ng build --prod）
3. 处理PDF Worker路径问题
   部分情况下，构建后PDF worker可能无法正确加载，可手动配置worker路径：
   在组件文件中添加：

   import { PdfJsViewerComponent } from 'ng2-pdfjs-viewer';
   
   // 在组件初始化前设置worker路径
   PdfJsViewerComponent.PDFJS.GlobalWorkerOptions.workerSrc = 'assets/pdf.worker.js';
   

   同时在angular.json的assets数组中添加：

   "assets": [
     // 其他assets配置
     {
       "glob": "pdf.worker.js",
       "input": "./node_modules/pdfjs-dist/build/",
       "output": "./assets/"
     }
   ]
   

   这样构建时会将worker文件复制到assets目录，确保离线环境可访问。

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