How do I render a PDF document being served from a Spring Boot API in an Angular app?

I have a Spring Boot application that presents an API of the form GET /api/file/{fileId}. This returns the file contents as a byte[] with application/pdf content-type.

I have an Angular (18) app in which I want to render the file contents.

I have tried embed, object, and iframe. In each case, I get nothing (Firefox), a grey rectangle (Safari) or a white rectangle (Chrome). and in each case I can see that the browser is not making the request to the file 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>


all have, essentially, the same result in all three browsers.

pdfUrl is a property on the component, derived from an object that has the API URL to the file. If I open the file directly, it definitely renders in the browser and also in Postman.

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


This should not be a cross-origin problem. The angular app is being served from the same base URL as the API (/, vs /api for the Spring Boot app. http://localhost:8080 while in development). As far as I can tell, rendering a PDF inline does not pose a security risk to modern browsers.

Does the URL need to be HTTPS nowadays? Is there something that needs to be enabled in the browser?

I cannot/do not want to use the Google Docs render method for a whole host of reasons (not least being that the PDF URLs are not public), and I would rather not use a JavaScript library to render the PDFs unless I really must, less code being better than more.

Continue reading...