I thought I had a solution for this using an embed so that Adobe would render the PDF in the browser, but this only works when the file is local or provided via a URL:
<embed src="./assets/pdf/example-1.pdf"
width="100%"
height="675px"
style="border: 1px solid red"
type="application/pdf">
But when I try to dynamically setting the embed `src` using `URL.createObjectURL(blob)` and bind it to the `embed` in Angular it doesn't render:
<embed [src]="url"
width="100%"
height="675px"
type="application/pdf">
Is there more to rendering a PDF in an embed using a `blob` other then:
this.http(..., { responseType: 'blob', observe: 'response' })
.subscribe((blob) => {
url = URL.createObjectURL(blob);
this.url = this.domSanitizer
.bypassSecurityTrustResourceUrl(url);
});
I just want to display the PDF sent down in the response using Adobe in Edge and IE11. It can be in an `iframe`, but this only works in Edge and not in IE11 with no displayed errors
For example, using this was suggested for cross browser compatibility when receiving a `base64` of the PDF, but it doesn't work for IE11, only Edge:
// Default to Chrome
let url = `data:application/pdf;base64,${src}`;
// Internet Explorer 11 and Edge workaround
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
const byteCharacters = atob(src);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/pdf' });
url = URL.createObjectURL(blob);
if (this.url) {
// Release URLs for performance and memory usage
this.window.URL.revokeObjectURL(this.url);
}
}
this.url = this.domSanitizer
.bypassSecurityTrustResourceUrl(url);
<iframe id="result"
[src]="url"
style="width: 100%; height: 95vh; border: 1px solid red;"></iframe>