在 Angular 中集成 PDFJS

Posted 2023-03-13

【中文标题】在 Angular 中集成 PDFJS

【英文标题】：Integrating PDFJS in Angular

【发布时间】：2019-07-11 18:54:53

【问题描述】：

我正在 Angular 中创建一个新组件来显示 PDF 文件，为此，我按照链接“https://www.npmjs.com/package/ng2-”中的这些步骤使用了 ng2-pdfjs-viewer pdfjs-viewer”，但它不工作。我不知道问题到底出在哪里。 这里是html组件：​​

<ng2-pdfjs-viewer 
  #pdfViewer
 [pdfJsFolder]="'https://www.emse.fr/~picard/cours/1A/java/livretJava.pdf'"
  [externalWindow]="true"
  [downloadFileName]="'mytestfile.pdf'"
  [openFile]="false"
  [viewBookmark]="false"
  [download]="false">
 </ng2-pdfjs-viewer>

谁能解释问题出在哪里？

我还有一个问题是否可以从外部链接加载 pdf，例如“D:\file.pdf”。

【问题讨论】：

您有任何错误吗？你的代码的结果是什么？

实际上没有，我只是没有任何 pdf 文件的视图，我的意思是它应该呈现“emse.fr/~picard/cours/1A/java/livretJava.pdf”文件的视图，但我没有任何视图跨度>

检查您的浏览器控制台，看看您的代码是否有任何错误。

不，我没有发现任何控制台错误

您使用的是哪个版本的 Angular？您正在使用的包是根据它的信息为 Angular 2 设计的，还有另一个用于 Angular 5+ github.com/VadimDez/ng2-pdf-viewer

【参考方案1】：

根据 ng2-pdfjs-viewer(https://www.npmjs.com/package/ng2-pdfjs-viewer) 的文档，[pdfJsFolder] 用于设置 PDF.JS 的 web 路径和构建文件夹。

您应该使用 pdfSrc 属性来设置 pdf 的路径。它在文档的使用部分中提到

例如

<ng2-pdfjs-viewer pdfSrc="your pdf file path"></ng2-pdfjs-viewer>

文档还声明在幕后使用 Mozilla 的 PDF.JS。 无论如何，很高兴您解决了问题