Question

我无法在Angular Component中显示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的初学者。

Answer 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部分的原因。

您会因出色的性能而获得回报。懒惰地加载服务工作者，使其可以在单独的线程中运行。因此，用户将从非阻塞I / O和非阻塞渲染中受益。这是显着的性能提升，尤其是对于200页以上的大型文档。

Answer 2

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

使用ngx-extended-pdf-viewer

2 个答案: