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");
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步