Wednesday, February 21, 2018

ie11 Downloading Base64 documents

Leave a Comment

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/

3 Answers

Answers 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); }); 

Answers 2

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>

Answers 3

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;      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                    }                     else {                         var blobUrl = URL.createObjectURL(blob);                         window.open(blobUrl, "_blank");                     } 

//called method

Function pdfBlobConvesion(b64Data, contentType) {

    var 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 += 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; } 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment