Javascript 使用javascript下载base64数据| IE11

Download base64 data using javascript | IE11

提问by Sunil

I am trying to download base64 data using “window.location.href” in JavaScript. It works fine in Chrome but the same code is not working in IE11.

我正在尝试使用 JavaScript 中的“window.location.href”下载 base64 数据。它在 Chrome 中运行良好，但相同的代码在 IE11 中不起作用。

Could you please let me know the fix or a workaround for the same?

您能否让我知道修复方法或解决方法？

Here is the code: Javascript:

这是代码：Javascript：

function DownloadPdf() {
window.location.href = "data:application/pdf;base64,JVBERi0xLjMNJeLjz9MNCj........Pg1zdGFydHhyZWYNMTczDSUlRU9GDQ=="

}

}

function DownloadExcel() {
window.location.href = "data:application/vnd.ms-excel;base64,UEsDBBQABgAIAAAAIQB......BLBQYAAAAACgAKAIACAACzHAAAAAA="
}

HTML:

HTML：

NOTE:

笔记：

I am developing an offline website where I am storing file in browser localStorage in base64 string format which is not connected to server. I don't have any physical file present.

我正在开发一个离线网站，我在浏览器 localStorage 中以未连接到服务器的 base64 字符串格式存储文件。我没有任何物理文件。

回答by Chandra Kudumula

Below is working for me in all browsers

以下适用于所有浏览器

var blob = new Blob([tdData], { type: 'text/csv' });
if (window.navigator.msSaveBlob) { // // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
    window.navigator.msSaveOrOpenBlob(blob, 'exportData' + new Date().toDateString() + '.csv');
}
else {
    var a = window.document.createElement("a");
    a.href = window.URL.createObjectURL(blob, { type: "text/plain" });
    a.download = "exportData" + new Date().toDateString() + ".csv";
    document.body.appendChild(a);
    a.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
    document.body.removeChild(a);
}

回答by Technacron

I have found a pluginfor javascriptwhich may be usefull for you in this case, it is developed to download the base64content with MIMEtypes specified . Moreover Please have a look at this answerwhich explains how to download the base64 encoded content .

我找到了一个javascript插件，在这种情况下可能对您有用，它被开发用于下载指定MIME类型的base64内容。此外，请看看这个答案，它解释了如何下载 base64 编码的内容。

function fnExport(base64encodedstring) {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    // If Internet Explorer:
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("content type", "replace");
        txtArea1.document.write(base64encodedstring);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, reportname + ".extension");
        console.log(sa);
    }
    else { //other browser not tested on IE 11
        sa = window.open('data:content-type;base64,' +base64encodedstring);
    }
    return (sa);
}

回答by Anant

Follow these steps to download a Word document from .NET Web API to ajax.

按照以下步骤将 Word 文档从 .NET Web API 下载到 ajax。

1. Convert a file to base64 format (this is just 2 lines of code in C#)
2. Return base64 string to front end.

3. Convert base64 string to blob using below function.

   base64toBlob = function (base64Data, contentType) {
       contentType = contentType || '';
       var sliceSize = 1024;
       var byteCharacters = atob(base64Data);
       //var byteCharacters = decodeURIComponent(escape(window.atob(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 });
   }
   

4. Render blob as a file. This has to be handled slightly differently in Chrome vs IE. For Chrome, we need to use link download option.

1. 将文件转换为 base64 格式（这只是 C# 中的 2 行代码）
2. 将 base64 字符串返回到前端。

3. 使用以下函数将 base64 字符串转换为 blob。

   base64toBlob = function (base64Data, contentType) {
       contentType = contentType || '';
       var sliceSize = 1024;
       var byteCharacters = atob(base64Data);
       //var byteCharacters = decodeURIComponent(escape(window.atob(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 });
   }
   

4. 将 blob 渲染为文件。这在 Chrome 和 IE 中的处理方式略有不同。对于 Chrome，我们需要使用链接下载选项。

Please refer to this link for IE 11:
https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

请参考 IE 11 的链接：https:
//msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx