[Vuejs]-How to show PDF preview in IE11 with Blob URI

by

0👍

✅

As far as I know, Internet Explorer does not support the use of DATA URIs as the source of IFRAMEs.

As an alternative workaround, in the IE browser, I suggest you could download the PDF file first, then, using IE browser to display the PDF file.

You could refer to the following code:

function myfunction() {
    var data = "BASE64STRING";
    var fileName = "test.pdf";
    //For IE using atob convert base64 encoded data to byte array
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        var byteCharacters = window.atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], { type: 'application/pdf' });
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
        // Directly use base 64 encoded data for rest browsers (not IE)
        var base64EncodedPDF = data;
        var pdfWindow = window.open();
        pdfWindow.document.write('<iframe src="data:application/pdf;base64,' + base64EncodedPDF+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>');

    }
}

Besides, you could try to use the ES5 version of pdf.js and pdf.worker.js version (Here is a sample about using pdf.js, it works well on my side using IE11, you can check it):

  • pdf.js ES5 version: https://mozilla.github.io/pdf.js/es5/build/pdf.js
  • pdf.worker.js ES5 version: https://mozilla.github.io/pdf.js/es5/build/pdf.worker.js

Leave a comment