<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id=""style="background-color: salmon; height: 50px;width: 150px;" οnclick="excel()">
导出excel
</div>
<script type="text/javascript">
function excel(){
var jsonData=[{序号:"",姓名:"",民族:"",班级:"",}];
var data = [{
'id':'001',
'name':'xiaoming',
'race':'汉',
'grade':'1'
}]
// var jsonData=[{}];
for(var i=0;i<10;i++){
jsonData.push({序号:i,姓名:data[0].name,民族:data[0].race,班级:data[0].grade,});
}
cloneAndConvert(jsonData);
}
function cloneAndConvert(jsonData){
// var jsonData = [{firstName:"Lorem Ipsum ", lastName:"Lorem Ipsum", age:46}];
// for(i=0;i<9;i++)
// {
// jsonData.push({firstName:"Lorem Ipsum"+i, lastName:"Lorem Ipsum"+i, age:46});
// }
// var filteredGridData = JSON.parse(JSON.stringify(jsonData));
var filteredGridData = jsonData;
JSONToCSVConvertor(filteredGridData, "UserReport.csv", true);
}
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
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';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//this trick will generate a temp "a" tag
var link = document.createElement("a");
link.id="lnkDwnldLnk";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
var csv = CSV;
blob = new Blob([csv], { type: 'text/csv' });
var csvUrl = window.webkitURL.createObjectURL(blob);
var filename = 'UserExport.csv';
$("#lnkDwnldLnk")
.attr({
'download': filename,
'href': csvUrl
});
$('#lnkDwnldLnk')[0].click();
document.body.removeChild(link);
}
</script>
</body>
</html>
自己使用过这种方法,