JavaScript 实现导出 CSV 文件
通过接口拿到的数据结构如上所示，现在要通过 JavaScript 将数据导出：
<script type="text/javascript" src="json2csv.js"></script>
<script type="text/javascript">
var title = Object.keys(jsonData.list[0]);
var csv = json2csv({data: jsonData.list, fields: title});
// 实现方法一：
var exportFun = function(content, filename) {
var eLink = document.createElement('a');
eLink.download = filename;
eLink.style.display = 'none';
// 字符内容转成blob地址
var blob = new Blob([content]);
eLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eLink);
eLink.click();
// 移除
document.body.removeChild(eLink);
};
if('download' in document.createElement('a')) {
exportFun(csv, 'test.csv');
}
else {
alert('浏览器不支持');
}
/*// 实现方法二：
const BOM = '\uFEFF';
function exportCsv(data, filename) {
if(navigator.msSaveOrOpenBlob) { // for IE
let blob = new Blob([BOM+csv], {type:'text/csv;charset=utf-8;'});
navigator.msSaveOrOpenBlob(blob, filename);
}
else {
let uri = encodeURI(`data:text/csv;charset=utf-8,${BOM}${csv}`);
let eLink = document.createElement('a');
eLink.href = uri;
eLink.download = filename;
document.body.appendChild(eLink);
eLink.click();
document.body.removeChild(eLink);
}
}
exportCsv(csv, 'test2.csv');
*/
</script>json2csv.js 是封装的将 json 数据转成 csv 格式的小工具，可以↓戳↓这↓里↓获取：
https://download.csdn.net/download/u014395524/11817408
导出 csv 文件以后，需求的同事表示不满意了，她们说：1、导出后文件的表头信息都是 area_id, author_name, category ... 这种；2、导出文件的字段信息太多，而且顺序不合理，希望可以指定导出哪些字段及相关顺序。于是有了接下来的版本：
<script type="text/javascript">
// 属性映射
var map = {news_id:"新闻id",title:"新闻标题",provider_name:"提供商",author_name:"内容来源",sub_type:"子类型",times:"阅读量",import_user:"创建人",import_time:"创建时间",release_user:"发布人",release_time:"发布时间",synopsis:"详细信息",is_public:"是否公开"};
// 要导出的字段信息
var title = ['news_id','title','provider_name','author_name','sub_type','times','import_user','import_time','release_user','release_time','synopsis','is_public'];
// 导出文件实际显示的表头信息
var titleName = [];
title.forEach(function(item, index) {
titleName.push(map[item]);
});
// 要导出的数据
var tmpData = [];
jsonData.list.forEach(function(item, index) {
let props = Object.keys(item);
let obj = {};
props.forEach(function(prop){
if(~title.indexOf(prop)) {
if(prop=='is_public') {
obj[map[prop]] = item[prop]==1?'是':'否';
}
else {
obj[map[prop]] = item[prop];
}
}
});
tmpData.push(obj);
});
var csv = json2csv({data: tmpData, fields: titleName});
exportFun(csv, 'test.csv');
// exportCsv(csv, 'test2.csv');
</script>导出后格式：
以上只是针对单纯的数据导出，有的场景需要从 table 表格中导出数据，就需要自行将 table 里的数据整理成 csv 格式：
<script>
$(document).on("click", "#productqueryOutXls", function () {
var $trs = $("#alternatecolor").find("tr");
var str = "";
for (var i = 0; i < $trs.length; i++) {
var $tds = $trs.eq(i).find("td,th");
for (var j = 0; j < $tds.length; j++) {
str += $tds.eq(j).text() + ",";
}
str += "\n";
}
var aaaa = "data:text/csv;charset=utf-8,\ufeff" + str;
var link = document.createElement("a");
link.setAttribute("href", aaaa);
var date=new Date().getTime();
var filename = new Date(date).toLocaleDateString();
link.setAttribute("download", filename + ".csv");
link.click();
});
</script>最后，附上看到的一篇比较详细的文章《彻底理解使用JavaScript 将Json数据导出CSV文件》：