ie11 Downloading Base64 documents

Question

I have tried pretty much everything at this point and I cannot get anything to work in ie.

I need ie to download base64 documents from an attachment panel. I have no access to the server side code or database. The images cannot be stored in a folder to be pulled up, they need to be presented this way.

I have tried using a plain link and sticking the base64 sting in there and it just opens up a new blank window.

<a target="_blank" download class="btn btn-primary downloadAttachment" href="' + blobUrl + '" >Download</a>

I have tried turning the url into a blob and opening the blob and that resulted in the browser not doing anything.

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = base64Data;
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

I am completely and totally stuck. I have tried everything from google and on here.

My two latest attempts here

https://jsfiddle.net/pqhdce2L/

http://jsfiddle.net/VB59f/464/

Answer 1

Some time ago I've coined this function to make ("offer/initialize") a download of an xlsx or csv content accepting both a Blob or a base64 string:

// Initializes a file download of a provided content
//
// Not usable outside browser (depends on window & document)
//
// @param {Blob|base64} cont File content as blob or base64 string
// @param {string} ftype File type (extension)
// @param {string} [fname='export.' + ftype] File name
// @param {string} [mime='application/zip'] File mime type
// @returns {void}
function makeFileDownload(cont, ftype, fname, mime) {
    if (!fname) fname = 'export.' + ftype;
    if (!mime) mime = ftype === 'csv' ? 'text/csv' : 'application/zip'; // or 'application/vnd.ms-excel'

    if (Object.prototype.toString.call(cont) === '[object Blob]'
            && window.navigator && window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(cont, fname);
    }
    else {
        var downloadLink = document.createElement('a');
        downloadLink.download = fname;
        downloadLink.href = typeof cont === 'string'
            ? 'data:' + mime + ';base64,' + cont
            : window.URL.createObjectURL(cont);
        downloadLink.onclick = function(e) { document.body.removeChild(e.target); };
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }
};

This should be able to accept both Blob and base64 string - you should get the idea how it's being done for either a Blob and a base64 string from the if/else block.

If passing it base64 string is problematic just convert it to a Blob first (as suggested for example in this SO question, this answer is specifically aimed at IE11). Adjust the mime defaults according to your expected usage.

I suppose you already have the content (Blob/base64), keep your original link (which I suppose is to be clicked by an user) a plain link or rather a button (i.e. without the download/href attributes), attach it a click event handler where you'll call the function and it should initialize the download for you:

document.querySelector('#originalLink').addEventListener('click', function () {
    makeFileDownload(content, extension, filename, mimetype);
});

Answer 2

If you are trying to generate blob URL in IE, it will not work.

We have to download the file to local by using below code:

function printPdf(id) {
  $.ajax({
    url: 'url',
    type: 'POST',
    data: { 'ID': id },
    success: function (result) {

      var blob = pdfBlobConvesion(result.PdfUrl, 'application/pdf');
      var isIE = /*@cc_on!@*/false || !!document.documentMode;
      // Edge 20+
      var isEdge = !isIE && !!window.StyleMedia;
      if (isIE || isEdge) {
        window.navigator.msSaveOrOpenBlob(blob, "ProviderOfficePDF.pdf");
      }
      else {
        var blobUrl = URL.createObjectURL(blob);
        window.open(blobUrl, "_blank");
      }
    }
  });
}

function pdfBlobConvesion(b64Data, contentType) {
  contentType = contentType || '';
  var sliceSize = 512;
  b64Data = b64Data.replace(/^[^,]+,/, '');
  b64Data = b64Data.replace(/\s/g, '');
  var byteCharacters = window.atob(b64Data);
  var byteArrays = [];

  for ( var offset = 0; offset < byteCharacters.length; offset = offset + sliceSize ) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, { type: contentType });
  return blob;
}

Answer 3

IE, in classic fashion, requires you to use a proprietary method for "saving" a blob.

msSaveBlob or msSaveOrOpenBlob is what you're looking for.

Instead of adding it as the href, add an onclick handler to your a tag and call navigator.msSaveBlob(blob, "Sample Name");

Additionally if you need to support other browsers you'll need some other code to support those browsers.

For example:

var content = new Blob(["Hello world!"], { type: 'text/plain' });
var btn = document.getElementById('btn');

if (navigator.msSaveBlob) {
  btn.onclick = download;
} else {
  btn.href = URL.createObjectURL(content);
  btn.download = true;
}

function download() {
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(content, "sample.txt");
  }
}

<a id="btn" href="#">Download the text!</a>

Answer 4

var data = item;
var fileName = 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/octet-stream'});
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
else if( agent.indexOf('firefox') > -1)
{
console.log(extention,'item111')
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 FileSaver = require('file-saver');
 var blob = new Blob([byteArray], {type: "application/octet-stream"});
 saveAs(blob, fileName);
  }
 else{
  this.fileDownload='data:application/octet-stream;base64,'+item;
   var link = document.createElement("a");
   const fileName=name;
   link.href = this.fileDownload;
   link.download=fileName;
   link.click();
  }
  }