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");