使用 ngx-extended-pdf-viewer 在 Angular 组件中显示 PDF 文件答案

【问题标题】：Display PDF file inside Angular component using ngx-extended-pdf-viewer使用 ngx-extended-pdf-viewer 在 Angular 组件中显示 PDF 文件
【发布时间】：2020-02-11 10:36:57
【问题描述】：

我在 Angular 组件中显示 PDF 文件时遇到问题。

component.html

<ngx-extended-pdf-viewer
    [src]="'./instruction.pdf'"
    backgroundColor="#ffffff"
    [height]="'90vh'"
    [useBrowserLocale]="true"
  ></ngx-extended-pdf-viewer>

我在同一目录中有pdf文件。

angular.json

"scripts": [
     "node_modules/ngx-extended-pdf-viewer/assets/pdf.js",
     "node_modules/ngx-extended-pdf-viewer/assets/viewer.js"
 ]

浏览器错误： GET http://localhost:4200/assets/pdf.worker.js 404 (Not Found) 我究竟做错了什么？请注意，我是 Angular 的初学者。

【问题讨论】：

标签： angular pdf ngx-extended-pdf-viewer

【解决方案1】：

我是 ngx-extended-pdf-viewer 的开发者。

小故事：您必须将pdf.worker.js 文件添加为资产：

       "assets": [
          { "glob": "**/pdf.worker.js", "input": "node_modules/ngx-extended-pdf-viewer/assets", "output": "/assets/" },
          ...
          }]

长篇大论：

直到最近，我还建议将所有三个文件都添加到 scripts 部分：pdf.js、pdf.worker.js 和 viewer.js。几周前，我发现虽然这个解决方案有效，但远非理想。最好不要在捆绑包中包含服务人员。它被设计为延迟加载。这就是我将文件从scripts 部分移动到assets 部分的原因。

您会因出色的表现而获得回报。延迟加载 service worker 允许它在单独的线程中运行。因此，用户可以从非阻塞 I/O 和非阻塞渲染中受益。这是一个显着的性能提升，尤其是对于超过 200 页的大型文档。

【讨论】：

从文档中没有找到这个。幸运的是找到了这个 SO 线程，但是你能添加一些关于这个 f.ex 的东西吗？ Github页面或某处。顺便说一句，它可以工作，但必须使用 : .... "glob" : "*/" ... 等，然后才发现所有必要。

【解决方案2】：

添加： { "glob": "**/*", “输入”：“node_modules/ngx-extended-pdf-viewer/assets/”， “输出”：“/资产/” } 到“assets”属性中的 angular.json 文件。

【讨论】：