javascript前端导出csv表格
使用场景
后台统计经常要展示各种各样的表格数据,几乎每个表格展示都会伴随着数据的导出。
之前的解决方案都是通过发起一个相同查询参数(querystring)的导出请求(action=export),由服务器导出表格。这种方式的缺点是显而易见的:服务器额外做了一次查询。
JS前端直接导出
曾经我想过把当前表格数据封装直接发给服务器然后节省查询,总觉得太别扭了。直到前几天偶然发现JS可以直接导出csv文件。导出的原理如下:
- a标签的datasource功能
<a href="data:..."></a>
直接下载文件 - a标签的
download
属性,用以声明下载的文件名 - csv文件的BOM头,
data:text/csv;charset=utf-8,\ufeff
,特别指出\ufeff
是BOM头,可以让excel等识别出csv文件的编码。 - encodeURIComponent() ,对csv文件的换行符
\n
进行转码
一个简单的示例
js_csv = {
export_csv: function(data, name) {
// “\ufeff” BOM头
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = (name+".csv")||"temp.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
},
export_table: function(selector, name) {
var self = this;
if (document.querySelectorAll(selector).length == 0) {
alert('Selector "'+selector+'" not exists!');
return false;
}
self.export_csv(self.get_table_data(selector), name);
},
get_table_data: function(selector) {
var data = "";
document.querySelectorAll(selector+' tr').forEach(function(t) {
var tmp = [];
t.querySelectorAll('th,td').forEach(function(e){
tmp.push(e.innerText.replace("\n", "")); // 单元格里含有多个html元素可能会获取到换行符
});
data += tmp.join(",") + "\n";
});
return data;
}
}
// 直接导出数据
js_csv.export_csv("dapianzi,卡夫卡,真理君,宿敌", "王路飞");
// 导出表格
js_csv.export_table("#table_id", "Some table data");