javascript - Saving Base64 encoded PDF with Internet Explorer 10 and below

Question

I have recently started using Bootstrap Table and the export plugin for it. A problem I came across is that the export plugin doesn't work for IE, because the files are output using Data URI, which IE doesn't support (I think I read that IE 11 supports it, but no one in my organization uses IE 11, of course.).

The only file types I am interested in exporting are Microsoft office types (Word, Excel) and PDFs. I have created a functioning workaround for the MS files.

  if (supportsDataUriNavigation())
    window.open('data:application/vnd.ms-' + defaults.type + ';filename=exportData.doc;' + base64data);
  else {
    var iframe = document.getElementById("dataFrame");
    iframe = iframe.contentWindow || iframe.contentDocument;
    iframe.document.open("text/html", "replace");
    iframe.document.write(excelFile);
    iframe.document.close();
    iframe.focus();

    iframe.document.execCommand("SaveAs", true, defaults.fileName + fileExtension);
  }

In this check, if the browser is IE, then I use the code I found here. This works great for the MS file types, but when I try to do the same for the PDF file, it tries to save as a .htm file. This file is blank. If I replace the fileExtension variable with .pdf in my code, the SaveAs window will not display when I click to export. There are no javascript errors.

I set the src attribute of an embed tag to a string that is returned by the plugin javascript, and it looks like so: 'application/pdf;base64,' + Base64.encode(buffer)

Anyone know of any solution/workaround?

Answer 1

I know this is very old question, but I found the solution and I want to share anyone who has the same problem. You can see the demo here : https://jsfiddle.net/quangminh_ln/hy36tnt6/

'use strict';

var data = "...Your PDF base64 string...";
var fileName = "your_file_name";
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE workaround
    var byteCharacters = 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 { // much easier if not IE
    window.open("data:application/pdf;base64, " + data, '', "height=600,width=800");
}

The link that I saw for my solution : https://viethoblog.wordpress.com/2016/08/30/loaddisplay-pdf-from-base64-string-bonus-ie-workaround/