客户要求把一个表格导出csv下载，项目后台代码是php，但php写这种功能太麻烦了。而且h5支持的blob不就是为了解决这种问题吗？所以我简单写了一个demo用于把前端表格代码转成csv文件，并直接下载。

csv格式的文件是用半角逗号,隔开每一格，每一格内容可以用双引号"括起来，换行符\n进行换行。唯一需要注意的是utf8的内容，需要自己在头部写入utf8的bom，即0xEF 0xBB 0xBF。

demo代码如下，兼容性么，ie基本不考虑了吧。由于记得某个浏览器不支持innerText，所以这里用innerHTML来获取内容，并替换掉所有的html标签。

<meta charset='utf-8' >
<table id='cwgtable'>
  <tr>
      <td>10</td>
      <td>2中文</td>
      <td>3</td>
  </tr>
  <tr>
      <td>11</td>
      <td>22</td>
      <td>33</td>
  </tr>
  <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
  </tr>
</table>

<script>
/**
 table2csv_donwload()
 author: treemonster
 latest: 2017-09-22
 */
let table2csv_download=(tb,fn=Date.now()+'.csv')=>{try{
  let csv=``
  for(let r=0;r<tb.rows.length;r++){
    for(let c=0,ce=tb.rows[r].cells;c<ce.length;c++){
      csv+=`"${ce[c].innerHTML.replace(/<\/{0,1}[a-z]+[^>]*>/ig,'').replace(/(,)|(")/g,(_,a,b)=>a?'，':'“')}",`
    }
    csv+=`\n`
  }
  let utf8=new Int8Array(3),i=0
  // bom for utf-8
  utf8[i++]=0xEF,utf8[i++]=0xBB,utf8[i++]=0xBF
  let b=new Blob([utf8,csv],{'content-type':'application/octet-stream'})
  let o=URL.createObjectURL(b)
  let link=document.createElement('a')
  link.href=o
  link.download=fn
  link.click()}catch(e){alert("呵呵，你的浏览器不支持，请换一个吧")}
}

cwgtable.onclick=()=>table2csv_download(cwgtable)

</script>

相关文档

暂无

随便看看

1. sqlite 查看table的构建语句

2. mac 终端运行后台程序如何在终端关闭时继续运行

3. raw.githubusercontent.com DNS被指向127.0.0.1

4. npm远程服务器某些配置不兼容代理的解决办法

5. html5 全屏代码

6. 判断变量是否 0 或者 '0'

7. heroku查看app使用时间

8. mongodb 批量修改字段语句

9. 模拟307跳转情况

10. webrtc服务搭建

11. webpack使用外部资源

12. git记住/删除账号密码

13. mongodb2.4 添加用户

14. 猴子选大王算法问题

15. 简易版事件封装

16. 随机取某个概率区间的代码

17. 数据库清理优化