本文介绍一种在客户端使用JavaScript创建并下载CSV文件的方法，重点解决不同浏览器的兼容性问题。通过检测浏览器特性，利用Blob对象和动态链接点击实现文件导出，适用于前端数据展示与导出场景。
JavaScript实现跨浏览器CSV文件创建与下载
本文分享一个使用JavaScript在客户端生成CSV文件并触发下载的完整示例，旨在提供兼容主流浏览器的解决方案。具体实现逻辑如下所示。
$("#radarDLBut").click(function(){
var data = [displayData["radar_chart"]["r_label"],displayData["radar_chart"]["r_default"]];
var csvContent = "data:text/csv;charset=utf-8,\ufeff";
if (window.navigator.msSaveOrOpenBlob) {
csvContent = "\ufeff";
}
data.forEach(function(infoArray, index){
dataString = infoArray.join(",");
csvContent += index < data.length ? dataString+ "\n" : dataString;
});
if (window.navigator.msSaveOrOpenBlob) {
// if browser is IE
var blob = new Blob([decodeURIComponent(encodeURI(csvContent))],{
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, 'subject.csv');
}else{
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "subject.csv");
document.body.appendChild(link);
link.click();
}
});希望上述内容能为JavaScript开发人员在处理前端数据导出功能时提供参考与帮助。