在Angular 6中使用ngx-extended-pdf-viewer展示PDF遇报错求助

我之前在Angular 6项目里用ngx-extended-pdf-viewer的时候也踩过这个坑，这个错误本质上是PDF.js的初始化实例未正确创建导致的，给你几个亲测有效的解决方向：

1. 确保组件版本与Angular 6完全兼容 #

Angular 6属于比较早期的版本，新版本的ngx-extended-pdf-viewer已经不再适配它了。你需要卸载当前安装的版本，重新安装明确支持Angular 6的版本：

npm uninstall ngx-extended-pdf-viewer
npm install ngx-extended-pdf-viewer@2.0.0 --save

这个版本是经过验证可以稳定运行在Angular 6环境下的。

2. 优化组件初始化时机（比delayFirstView更可靠） #

虽然你已经加了delayFirstView="1000"，但Angular 6的变更检测机制可能还是会让组件在DOM未完全就绪时就开始初始化。可以用*ngIf配合组件生命周期钩子来控制渲染时机：

• 在组件的.ts文件中添加一个状态变量：

isViewerReady = false;

ngAfterViewInit(): void {
  // 确保DOM完全渲染后再加载PDF组件
  setTimeout(() => {
    this.isViewerReady = true;
  }, 1500);
}

• 修改你的HTML代码：

<ngx-extended-pdf-viewer 
  *ngIf="isViewerReady"
  src="assets/dataset/doc_2.pdf" 
  id="idocument" 
  type="application/pdf" 
  width="100%"
  delayFirstView="2000"
></ngx-extended-pdf-viewer>

3. 检查PDF文件的加载路径与配置 #

确认你的PDF文件路径assets/dataset/doc_2.pdf是正确的：

• 检查该文件是否确实存在于项目的src/assets/dataset目录下
• 打开angular.json，确认assets配置里包含了src/assets（默认是有的，但如果有自定义配置可能会遗漏），确保打包时该文件能被正确输出

4. 排查是否存在PDF.js版本冲突 #

ngx-extended-pdf-viewer自带了PDF.js的依赖，如果你的项目中还手动引入了其他版本的PDF.js脚本，就会导致全局对象冲突，进而引发setHash为null的错误。检查项目的index.html或其他脚本引入处，移除多余的PDF.js相关引用。

如果以上方法都无效，可以尝试清理项目依赖缓存：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

有时候缓存导致的依赖损坏也会引发这类奇怪的初始化错误。

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