Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

IE 11 Rendering a PDF from Base64, Blob, or ArrayBuffer into an not working

$
0
0

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>


Viewing all articles
Browse latest Browse all 3527

Trending Articles