JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
<html>
<head>
</head>
<body>
<script type="text/javascript">
function jsexport(){
var jsonData = [{name:"张三", sex:"男", age:46},{name:"李四", sex:"男", age:20},{name:"王五", sex:"男", age:33},{name:"赵六", sex:"男", age:80}];
var GridData = JSON.parse(JSON.stringify(jsonData))
JSONToCSV(GridData, "UserReport.csv", true);
}
var blob;
var filename;
function c(){
window.navigator.msSaveOrOpenBlob(blob, filename);
}
function JSONToCSV(JSONData, ReportName, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
if (ShowLabel) {
var row = "";
for (var index in arrData[0]) {
row += index + ',';
}
row = row.slice(0, -1);
CSV += row + '\r\n';
}
for (var i = 0; i < arrData.length; i++) {
var row = "";
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
console.log(CSV);
}
if (CSV == '') {
alert("数据有错误");
return;
}
var link = document.createElement("a");
link.id="lnkDwnldLnk";
link.name="lnkDwnldLnk";
link.setAttribute("style", "display:none");
var ifdo = document.createElement("iframe");
ifdo.id="ifdiframe";
ifdo.name="ifdiframe";
ifdo.setAttribute("style", "display:none");
document.body.appendChild(link);
document.body.appendChild(ifdo);
var csv = CSV;
try
{
blob = new Blob([csv], { type: 'text/txt' });
}
catch (e)
{
blob = [csv];
}
var csvUrl = "";
filename = ReportName;
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
csvUrl = window.webkitURL.createObjectURL(blob);
link.setAttribute("download", filename);
link.setAttribute("href", csvUrl);
link.click();
}
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
csvUrl = window.URL.createObjectURL(blob);
link.setAttribute("download", filename);
link.setAttribute("href", csvUrl);
link.click();
}
else {
if(window.navigator.msSaveOrOpenBlob) { //IE>=10
link.addEventListener('click', function() {
window.navigator.msSaveOrOpenBlob(blob, filename);
});
link.click();
} else { //支持IE9、IE8; IE7及以下暂不支持,因为不支持JSON
var ifd = document.getElementById('ifdiframe').contentDocument;
ifd.open('text/plain', 'replace');
ifd.write('\r\n\r\n' + csv);
ifd.close();
ifd.execCommand('SaveAs', null, filename);
}
}
document.body.removeChild(link);
document.body.removeChild(ifdo);
}
</script>
<input type="Button" id="bygen" value="导出" onclick="jsexport()"/ >
<br>
<a id="mydownload" name="mydownload" href="#" >导出</a>
</html>
纯原生js代码,本人原创,未经许可可随意转载
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?