前端解析csv文件（文本文件）

前端解析csv文件（文本文件）

CSV文件格式实际上就是以逗号为分隔符的文件形式（实际也就是一种纯文本文件），在业务中经常用来批量存储数据用来批量上传至服务器存储在数据库中。

一般情况下前端只需要将文件上传至后台交给后台的同学去处理和解析，但也不排除某些特殊场景下需要前端自己去处理；

处理步骤：上传文件 -> 前端自己拿到上传的文件 -> 将文件解析成文本 -> 建文本按照自己需要的形式处理成数据。

比如上图所示的csv文件，我们用fileReader的readAsText方法读取后得到如下结果：

fileReader读取文件方法：

const fileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = function() {
        console.log(this.result);
     });

fileReader读取文件结果：

Variable Name,Variable Alias,Group,Read Write Acess,Node Id
Counter1,CounterAlias,,1,ns=sdsd&vf=1,default_group
Counter2,CounterAlias,,2,ns=sdsd&vf=2
Counter3,CounterAlias,,0,ns=sdsd&vf=3
,CounterAlias,,0,ns=sdsd&vf=4

这个结果就是以换行符和逗号分隔得到的一个字符串：

然后调用字符串的方法将其分隔成我们需要的格式（数组）：

方法：

const fileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = function() {
        let data = this.result.split("\n");
        let variables = [];
        data.map(v => {
          if (v) {
            variables.push(v.split(","));
          }
        });
      };

得到结果：

[
		["Variable Name","Variable Alias","Group","Read Write Acess","Node Id"],		
		["Counter1","CounterAlias","","1","ns=sdsd&vf=1"],
		["Counter2","CounterAlias","","2","ns=sdsd&vf=2"],				
		["Counter3","CounterAlias","","0","ns=sdsd&vf=3"]
		["","CounterAlias","","0","ns=sdsd&vf=4"]
]

这样一来得到的结果就足以让我们按照正常的业务逻辑去处理了。
注：导出文本文件为csv文件的时候， 文本前面加上"\ufeff"这样的BOM头，可以解决中文乱码的问题