代碼更新時間：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 onclick="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 示例截圖:
導出截圖：
