![](/img/trans.png)
[英]ngx-extended-pdf-viewer not displaying pdf in mobile view in angular 4
[英]Display PDF file inside Angular component using ngx-extended-pdf-viewer
我在 Angular 组件内显示 PDF 文件时遇到问题。
组件.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 的初学者。
我是 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 页标记的大型文档。
添加:{“glob”:“**/*”,“输入”:“node_modules/ngx-extended-pdf-viewer/assets/”,“输出”:“/assets/”}到angular.json文件中“资产”属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.