Ionic App使用ng2-pdf-viewer无法查看本地PDF文件

我之前也碰到过一模一样的情况——开发调试阶段不管是浏览器还是设备上都正常，一打包成正式APK就报错，大概率是资源路径、WebView配置或者库的运行环境差异导致的，给你几个排查和解决的方向：

• 先检查PDF文件的路径与资源打包配置
  如果是本地PDF，一定要把文件放在src/assets目录下，代码里的路径用assets/xxx.pdf这种根相对路径，别用./xxx.pdf这类相对路径。比如组件里可以这么写：

  pdfSrc = 'assets/your-target-file.pdf';
  

  同时确认angular.json里的assets配置包含了src/assets，确保打包时PDF文件被正确打包进APK：

  "assets": [
    "src/assets",
    "src/favicon.ico"
  ],
  

  如果是远程PDF，要在config.xml里确保网络权限和导航权限配置正确（正式发布建议限定具体域名，调试阶段可以先放开）：

  <access origin="*" />
  <allow-navigation href="*" />
  

• 禁用ng2-pdf-viewer的Worker模式
  这是最常见的解决办法，因为Cordova的WebView在正式构建后，Worker脚本的加载容易出现跨域或者路径问题，直接禁用Worker改用主线程解析就能解决这个错误。在模板里给pdf-viewer组件加上[useWorker]="false"属性：

  <pdf-viewer 
    [src]="pdfSrc" 
    [useWorker]="false"
    <!-- 你的其他配置项 -->
  ></pdf-viewer>
  

• 调整内容安全策略（CSP）
  打开src/index.html，检查页面头部的CSP meta标签，确保允许加载PDF解析所需的资源协议。比如可以调整成这样：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  

  重点要保证data:、content:这些协议被允许，PDF解析过程中会用到它们。

• 更新依赖版本
  也有可能是ng2-pdf-viewer和它依赖的pdfjs-dist版本兼容性问题，尝试更新到最新稳定版：

  npm install ng2-pdf-viewer@latest --save
  

  更新后重新构建测试，有时候版本不匹配会导致正式环境的异常。

你可以按这个顺序排查，一般前两个方法就能解决问题了。

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