Отображение PDF-файла внутри углового компонента с помощью ngx-extended-pdf-viewer

Question

У меня проблема с отображением PDF-файла внутри Angular Component.

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.

Вы вознаграждены превосходной производительностью. Загрузка сервисного работника лениво позволяет ему запускаться в отдельном потоке. Таким образом, пользователь получает выгоду от неблокирующего ввода-вывода и неблокирующего рендеринга. Это значительное повышение производительности, особенно при работе с большими документами выше отметки в 200 страниц.