Ie11 Загрузка документов Base64

Я пробовал почти все на этом этапе, и я не могу заставить работать что-либо.

Мне нужно загрузить файлы base64 с панели вложений. У меня нет доступа к серверному коду или базе данных. Изображения не могут быть сохранены в папке, которую нужно вытащить, они должны быть представлены таким образом.

Я пробовал использовать простую ссылку и приклеивал к ней base64, и он просто открывает новое пустое окно.

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

Я попытался превратить URL-адрес в blob и открыть blob, и это привело к тому, что браузер ничего не делал.

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

Я полностью и полностью застрял. Я пробовал все: от google и отсюда.

Мои две последние попытки здесь

https://jsfiddle.net/pqhdce2L/

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

Ответ 1

Некоторое время назад я придумал эту функцию, чтобы сделать ( "предлагать/инициализировать" ) загрузку содержимого xlsx или csv, принимающего как строку Blob, так и base64:

// 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();
    }
};

Это должно быть способно принять как строку Blob, так и base64 - вы должны понять, как это делается для строки Blob и base64 из блока if/else.

Если передать его base64, то строка проблематична, просто сначала преобразуйте ее в Blob (как предложено, например, в этом SO вопрос, этот ответ специально предназначен для IE11). Отрегулируйте значения по умолчанию mime в соответствии с ожидаемым использованием.

Я предполагаю, что у вас уже есть контент (Blob/base64), сохраните исходную ссылку (которую, я полагаю, должен щелкнуть пользователь), простая ссылка или, скорее, кнопка (т.е. без атрибутов download/href), присоедините это обработчик события клика, где вы вызовете функцию, и она должна инициализировать загрузку для вас:

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

Ответ 2

Если вы пытаетесь сгенерировать URL-адрес BLOB-объекта в IE, он не будет работать.

Мы должны загрузить файл на локальный компьютер, используя следующий код:

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

      var blob = pdfBlobConvesion(result.PdfUrl, 'application/pdf');
      var isIE = /*@[email protected]*/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;
}

Ответ 3

IE в классическом стиле требует использования запатентованного метода для "сохранения" блоба.

msSaveBlob или msSaveOrOpenBlob это то, что вы ищете.

Вместо добавления в качестве href добавьте обработчик onclick к тэгу a и вызовите navigator.msSaveBlob(blob, "Sample Name");

Кроме того, если вам нужно поддерживать другие браузеры, вам понадобится другой код для поддержки этих браузеров.

Например:

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>

Ответ 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{
  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();
  }
  }