JavaScript实现跨浏览器CSV文件创建与下载
作者:像素猫时间:2026-10-29 07:32:32浏览:499
本文介绍一种在客户端使用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开发人员在处理前端数据导出功能时提供参考与帮助。
作者最新文章
vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查
2026-11-05 17:30:30
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
