前端导出文件大部分还是通过服务器端的方式生成文件，然后传递到客户端。但很多情况下当我们导出CSV时并不需要后端参与，甚至没有后端。
做过WebGIS的同学经常会碰到这种场景，用户的兴趣点数据以csv文件形式上传到web应用中以表格形式展示，并可以编辑属性信息，编辑完成后需要将数据下载到本地。特别是对一些敏感数据，用户不希望传递到应用服务器端，整个过程完全在客户端进行。
上传过程我们暂且不讨论，只讨论生成CSV以及下载过程。
CSV的生成
问题一：如何分行分列？
思路：分行使用“\n”，分列使用”,”
|
1 |
var str = "col1,col2,col3\nvalue1,value2,value3"; |
实际应用中发现导出的csv用excel打开后，列可以分开但行无法分开。
解决方法是，将生成的csv字符串使用encodeURIComponent编码；但是IE8/9中不能使用encodeURIComponent，而是：’sep=,\r\n’ + str;
|
1 |
str = encodeURIComponent(str); |
问题二：字段值中含有特殊符号影响csv文件的正确解读，如：“,”，”\n”
思路：将含有特殊符号的字段用双引号包装起来,如：a,b => “a,b”
|
1 2 3 4 |
var textField = '"'; if (value && /[,\r\n]/g.test(value)) { value = textField + value + textField; } |
实际应用发现少考虑了一种情况，如果字段值中含有‘ ” ’这个符号，经过上方代码处理反而会出现问题：a”b => “a”b”。显然是语法错误。
解决方法是将”换成””，a”b => “a””b”
|
1 2 3 4 |
var textField = '"'; if (value && /[",\r\n]/g.test(value)) { value = textField + value.replace(/(")/g, '""') + textField; } |
在解决以上问题后生成CSV字符串代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
//data: 数据数组，每个元素都包含_outFields中指定的字段名 //_outFields： 字段名称数组 exports.createCSVStr = function(data, _outFields) { var textField = '"'; var content = ""; var len = 0, n = 0, comma = "", value = ""; try { array.forEach(_outFields, function(_field) { content = content + comma + _field; comma = ","; }); content = content + "\r\n"; len = data.length; n = _outFields.length; for (var i = 0; i < len; i++) { comma = ""; for (var m = 0; m < n; m++) { var _field = _outFields[m]; value = data[i][_field]; if (!value && typeof value !== "number") { value = ""; } Ԩ户的兴趣点数据以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字符串代码如下
|
