如何在 Angular 应用程序中渲染由 Spring Boot API 提供的 PDF 文档？

Question

我有一个 Spring Boot 应用程序，它提供了

GET /api/file/{fileId}

形式的 API。这将文件内容返回为

byte[]

，内容类型为

application/pdf

。

我有一个 Angular (18) 应用程序，我想在其中渲染文件内容。

我尝试过

embed

、

object

和

iframe

。在每种情况下，我都什么也得不到（Firefox）、灰色矩形（Safari）或白色矩形（Chrome）。在每种情况下，我都可以看到浏览器没有向文件 API 发出请求。

<embed [src]="pdfUrl" type="application/pdf" width="100%" height="500" />
<object [data]="pdfUrl" type="application/pdf" width="100%" height="500"></object>
<iframe [src]="pdfUrl" type="application/pdf" width="100%" height="500"></iframe>

在所有三种浏览器中本质上都有相同的结果。

pdfUrl

是组件上的一个属性，派生自具有文件 API URL 的对象。如果我直接打开文件，它肯定会在浏览器和 Postman 中呈现。

<a [href]="pdfUrl">{{file.displayName}}</a>

这不应该是跨域问题。 Angular 应用程序通过与 API 相同的基本 URL 提供服务（

/

，与 Spring Boot 应用程序的

/api

。开发时为 http://localhost:8080）。据我所知，内联渲染 PDF 不会对现代浏览器造成安全风险。

现在 URL 需要是 HTTPS 吗？浏览器中是否需要启用某些功能？

我不能/不想使用 Google Docs 渲染方法，原因有很多（尤其是 PDF URL 不是公开的），而且我宁愿不使用 JavaScript 库来渲染 PDF，除非我 真的 必须，代码越少越好。

Answer 1

我正在回答我自己的问题。 （StackOverflow 扮演橡皮鸭来获胜！）。日志中有一个错误 - 我只是在研究所有内容以确保我正确地写下我的问题时才看到它的相关性。

我得到的错误是

NG0904

。

这是因为 URL 需要变得“安全”。我用

safe-pipe

来解决这个问题。还有其他方法可以做到这一点 - 包括编写自己的管道。

安装

safe-pipe

与

npm install safe-pipe

然后，使用管道

pdfUrl | safe: 'resourceUrl'

确保 URL 安全。例如

<embed [src]="pdfUrl | safe: 'resourceUrl'" type="application/pdf" width="100%" height="500" />
<object [data]="pdfUrl | safe: 'resourceUrl'" type="application/pdf" width="100%" height="500"></object>
<iframe [src]="pdfUrl | safe: 'resourceUrl'" type="application/pdf" width="100%" height="500"></iframe>