使用ngx-extended查看器显示角元件内部的PDF文件

Question

我有一个问题，以显示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)，我做错了什么？请注意，我是一个有棱角的初学者。

Answer 1

我是ngx的开发者-扩展-pdf-查看器。

短篇小说:您必须将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部分的原因。

你得到了优异表现的奖励。延迟加载服务工作人员允许它在单独的线程中运行。因此，用户可以从非阻塞I/O和非阻塞呈现中获益。这是一个显著的性能提升，特别是在200页以上的大型文档中。

Answer 2

添加：{ "glob"："**/*"，"input"："node_modules/ngx-extended-pdf-viewer/assets/"，"output"："/assets/“}到”angular.json“属性中的angular.json文件。