Jquery CSV 导出工具 ，前端导出csv文件
程序员文章站
2022-06-01 14:11:59
...
代码更新时间：2019-11-12
最近在做个csv 导出的功能,网上的插件也是找了挺多，但是感觉不是很好用，并且部分中文和特殊符号还乱码 例如：TableExport 这个工具 虽然很强大吧 ，不过中文支持的还是不是很友好，就比如下面的数据：
如图:
图片太大已做压缩，大致的都是日文的内容，这就很蛋疼了，再三找来找去下，算了自己写一个吧，搜搜资料找了下例子，其实导出成csv 也不难。经过半天的折腾，终于写出了下面的例子，献上仅供参考，大部分功能是根据我的需求来封装的，有需要的朋友可以自己去改改。
代码如下：
<html>
<style>
.dropdown__body {
display: none;
}
.testcss {
display: none;
}
</style>
<body>
<table border="1" id="resultsTable">
<tr>
<th><a href="#"> 操作 </a></th>
<th>Month</th>
<th>Savings</th>
<th>mm</th>
<td></td>
</tr>
<tr>
<td><a href="#"> 删除 </a></td>
<td> 2019-11-12 </td>
<td>$120</td>
<td>小帅<span class="dropdown__body">小帅22</span><span style="display: none;">小帅33</span></td>
<td></td>
</tr>
<tr></tr>
<tr>
<td><a href="#"> 删除 </a></td>
<td> 2019-11-11 </td>
<td>$103</td>
<td>小天<span class="testcss">小天4444</span></td>
<td></td>
</tr>
<tr></tr>
<tr>
<td><a href="#"> 删除 </a></td>
<td> 2019-11-10 </td>
<td>$130</td>
<td>小广</td>
<td></td>
</tr>
<tr></tr>
<tr>
<td><a href="#"> 删除 </a></td>
<td> 2019-11-15 </td>
<td>$23123</td>
<td>小蓝</td>
<td></td>
</tr>
<tr></tr>
<tr>
<td><a href="#"> 删除 </a></td>
<td> 2019-11-16 </td>
<td>$123</td>
<td>小红</td>
<td></td>
</tr>
<tr></tr>
</table>
<br />
<button οnclick="exportCsv()">导出CSV</button>
<!--引入jquery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
/*
作者:APan
时间:2019-11-12
博客地址:https://blog.csdn.net/qq_40729514
转载请注明出处，尊重作者版权！
*/
var exportCsvTool = {
tableId: "", //table id 或者 class
fileName: "", //文件名字
tableHeader: [], //自定义表格头
showHeader: true, //是否显示表格头 true 显示 false 不显示
ignoredColumns: [], //需要忽略的列
ignoredRows: [], //需要忽略的行
ignoreAttribute: [], //提取文本时需要忽略掉的属性 {attrName:'属性名字',attrValue:'属性值'}
removeStrExpression: "", //需要移除的字符串 正则表达式 例如: /[,]/g 移除所有的 ,号
ignoreEmptyColumns: true, //忽略空的列
ignoreEmptyRows: true, //忽略空的行
headerPosition: 0, //表头的起始位置 默认为0 没有表头则传 -1
export() {
var _this = this;
var dateArray = _this.getTableData();
_this.outCsv(JSON.stringify(dateArray));
},
getTableData() {
var _this = this;
var dataArray = [];
var index = 0;
if (_this.headerPosition >= 0)
index = _this.headerPosition + 1;
var trs = $(_this.tableId).find("tr");
for (index; index < trs.length; index++) {
//忽略空的行
if (_this.ignoreEmptyRows && $(trs[index]).html() == "")
continue;
//跳过需要忽略的行
if (_this.ignoredRows.indexOf(index) >= 0)
continue;
var RowData = [];
var tds = $(trs[index]).find("td,th");
for (var i = 0; i < tds.length; i++) {
//跳过需要忽略的列
if (_this.ignoredColumns.indexOf(i) >= 0)
continue;
var tdText = $(tds[i]).text();
//是否忽略空的列
if (_this.ignoreEmptyColumns && tdText == "")
continue;
else {
//提取文本时需要过滤掉的内容 属性
if (_this.ignoreAttribute.length > 0) {
tdText = $(tds[i]).contents().filter(function () {
//表达式拼接
var express = $(this).attr(_this.ignoreAttribute[0].attrName) != _this.ignoreAttribute[0].attrValue;
for (var x = 1; x < _this.ignoreAttribute.length; x++) {
express = $(this).attr(_this.ignoreAttribute[x].attrName) != _this.ignoreAttribute[x].attrValue && +express;
}
return express;
}).text();
}
//正则表达式移除指定字符串
if (_this.removeStrExpression != "") {
tdText = tdText.replace(_this.removeStrExpression, "");
}
RowData.push(tdText);
}
}
dataArray.push(RowData);
}
return dataArray;
},
outCsv(JSONData) {
var _this = this;
var CSV = '';
//如果JSONData不是一个对象然后JSON.parse将解析对象中的JSON字符串
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
//表头的处理
if (_this.showHeader) {
var row = "";
//自定义表头
if (_this.tableHeader.length > 0) {
for (var j = 0; j < _this.tableHeader.length; j++) {
row += _this.tableHeader[j] + ",";
}
} else {
var trs = $(_this.tableId).find("tr");//#tableObj 为datatable的id
var tds = $(trs).eq(_this.headerPosition).find("th,td");
//这个循环将从数组的第一个索引中提取标签。
for (var j = 0; j < tds.length; j++) {
//跳过需要忽略的列
if (_this.ignoredColumns.indexOf(j) >= 0)
continue;
var tdText = $(tds).eq(j).text();
//是否忽略空的列
if (_this.ignoreEmptyColumns && tdText == "")
continue;
row += tdText + ",";
}
}
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]) {
if (arrData[i][index] instanceof Date) {
row += '"' + arrData[i][index].toLocaleString() + '",';
} else {
row += '"' + arrData[i][index] + '",';
}
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
// 定义一个文件名一个文件名
var fileName = "";
fileName += _this.fileName.replace(/ /g, "_");
// if browser is IE
if (window.navigator.msSaveOrOpenBlob) {
var csvContent = "\ufeff";
var uriie = csvContent + CSV;
var blob = new Blob([decodeURIComponent(encodeURI(uriie))], {
type: "data:text/csv;charset=utf-8,"
});
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
var csvContent = "data:text/csv;charset=utf-8,\ufeff";
var uriother = csvContent + CSV;
// 第一种实现
var encodedUri = encodeURI(uriother);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", fileName + ".csv");
document.body.appendChild(link);
link.click();
}
}
};
//导出csv
function exportCsv() {
exportCsvTool.fileName = (new Date()).getTime().toString(); //下载的文件名字
exportCsvTool.tableId = "#resultsTable"; //表单对象
exportCsvTool.ignoredColumns = [0]; //忽略第一列
exportCsvTool.tableHeader = ["Date", "Money", "Name"]; //自定义表头
exportCsvTool.removeStrExpression = /[,$]/g; //移除指定的 , 和 $ 字符 tips:要去掉空格 直接 ' ' 后面加个空格就行了
exportCsvTool.ignoreEmptyColumns = true; //是否忽略空的列
exportCsvTool.ignoreEmptyRows = true; //是否忽略空的行
//提取文本时需要过滤掉的属性 {attrName:'属性名字',attrValue:'属性值'}
exportCsvTool.ignoreAttribute = [{ attrName: "class", attrValue: "testcss" }, { attrName: "class", attrValue: "dropdown__body" }, { attrName: "style", attrValue: "display: none;" }];
exportCsvTool.export(); //导出csv
}
</script>
</body>
</html>上面的代码及例子可以完美运行，大多数参数和功能封装都是根据我自己的需求来的，如有bug 请留言指出，不完善之处请谅解，js 小白纯属。目前自己使用暂时未发现有什么问题哈，自己还会继续更新和完善下去。
demo 示例截图:
导出截图：
上一篇： 取出任意日期内的所有日期，可以区分大小月
下一篇： PHP生成不重复标识符的方法_php技巧