IE11环境下JavaScript生成CSV文件下载异常问题求助

兄弟，你这个问题我太熟了——IE11对CSV下载的处理逻辑和Chrome、Firefox完全不是一回事儿！你原来用的<a>标签+data URI+download属性的方式，现代浏览器都认，但IE11根本不买账，它会把data URI当成需要外部应用打开的资源，所以才弹出那个烦人的授权提示，哪怕加了可信站点也绕不过。

别慌，换用IE专属的API就能搞定，下面是兼容所有浏览器的修改版代码：

let csvContent = '';
// 生成表头
$.each(msg.d.LstObj[0], function (key, element) {
    csvContent += (csvContent === '' ? '' : ',') + key;
});
csvContent += "\n";
// 生成行数据
msg.d.LstObj.forEach(function (rowArray) {
    var row = '';
    $.each(rowArray, function (key, element) {
        row += (row === '' ? '' : ',') + element;
    });
    csvContent += row + "\n";
});

// 兼容IE11和现代浏览器的下载逻辑
if (window.navigator.msSaveBlob) {
    // IE11专属操作：把CSV转成Blob再用msSaveBlob触发下载
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    window.navigator.msSaveBlob(blob, 'people.csv');
} else {
    // 现代浏览器沿用你原来的逻辑就行
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'people.csv';
    hiddenElement.click();
}

几个关键点要注意： #

• msSaveBlob是IE11独有的API，专门用来触发Blob文件的直接下载，不会弹出那种应用选择提示。
• 我们先判断浏览器是否支持这个API，支持就走IE的逻辑，否则用原来的现代浏览器方案，完美兼容。
• 如果你的CSV里有中文，IE11可能会出现乱码，这时候在CSV内容开头加个UTF-8的BOM就行：

  let csvContent = '\ufeff'; // 先加BOM
  // 然后再生成表头和行数据...
  

这样改完之后，IE11就能正常触发CSV下载了，不会再弹出那个讨厌的提示~

内容的提问来源于stack exchange，提问作者YannickIngenierie