Web端导出CSV

前端导出文件大部分还是通过服务器端的方式生成文件,然后传递到客户端。但很多情况下当我们导出CSV时并不需要后端参与,甚至没有后端。

做过WebGIS的同学经常会碰到这种场景,用户的兴趣点数据以csv文件形式上传到web应用中以表格形式展示,并可以编辑属性信息,编辑完成后需要将数据下载到本地。特别是对一些敏感数据,用户不希望传递到应用服务器端,整个过程完全在客户端进行。

上传过程我们暂且不讨论,只讨论生成CSV以及下载过程。

CSV的生成

问题一:如何分行分列?

思路:分行使用“\n”,分列使用”,”

实际应用中发现导出的csv用excel打开后,列可以分开但行无法分开。

解决方法是,将生成的csv字符串使用encodeURIComponent编码;但是IE8/9中不能使用encodeURIComponent,而是:’sep=,\r\n’ + str;

问题二:字段值中含有特殊符号影响csv文件的正确解读,如:“,”,”\n”

思路:将含有特殊符号的字段用双引号包装起来,如:a,b => “a,b”

实际应用发现少考虑了一种情况,如果字段值中含有‘ ” ’这个符号,经过上方代码处理反而会出现问题:a”b => “a”b”。显然是语法错误。

解决方法是将”换成””,a”b => “a””b”

在解决以上问题后生成CSV字符串代码如下

问题三:如果字段中含有希伯来文、法语、德语等文字('éà; ça; 12\nà@€; çï; 13'),导出的csv文件在Excel中打开后,这些文字呈现出乱码

解决方法:严格来说这并不是csv文件的问题,而是Excel处理文件编码方式问题,Excel默认并不是以UTF-8来打开文件,所以在csv开头加入BOM,告诉Excel文件使用utf-8的编码方式。

实际应用中发现,这种处理方式在windows中的Excel中打开后可以正常显示,但在mac上的Excel无法正确显示。目前没有完全的解决方案,但mac中可以使用自带的Numbers软件打开,不会出现乱码问题。

CSV的下载方式

问题一:如何在解决不同浏览器中的下载问题?

思路:

  • IE10以下,利用execCommand方法来保存csv文件

在实际应用中浏览器会打开一个新窗口,并弹出保存文件对话框,而对话框中保存类型时,只有html和text两项可选,此时需要在文件名中手动加上“.csv”后缀

  • IE10以及Edge浏览器使用navigator.msSaveBlob(blob);虽然这些浏览器也支持上面的方法,但可以避免上面遇到的问题。

msSaveBlob是IE的私有方法,只有IE10及以上和Edge浏览器支持。

  • Firefox、Chrome、Safari浏览器中使用a标签,利用html5中增加的download属性来下载csv

Safari中并不支持除了input外的元素直接调用click方法,所以我们利用自定义事件,模拟用户点击来下载文件。实际应用中发现,如果csv字符串太大,以上方式在下载csv时会导致浏览器崩溃。解决的方法是利用URL.createObjectURL(blob)创建一个连接给a标签。

综合上述方式,下载csv文件的代码如下

参考资料:

1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部