前端 VUE 解析 CSV 文件

测试文件及依赖下载

静态依赖

链接:https://share.weiyun.com/5cqoEGQ 密码:6hs4t8

yarn包

yarn add jschardet -s
yarn add papaparse -s

业务代码

template

<el-upload
  ref="upload"
  action
  :limit="1"
  :file-list="fileList"
  :auto-upload="false"
  :http-request="httpRequest"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

method

httpRequest(param) {
  let fileObj = param.file; // 相当于input里取得的files
  let fReader = new FileReader();
  fReader.readAsDataURL(fileObj);
  fReader.onload = evt => {
    // 检查编码
    let encoding = this.checkEncoding(evt.target.result);
    // 将csv转换成二维数组
    Papa.parse(fileObj, {
      encoding,
      complete: res => {
        // UTF8 \r\n与\n混用时有可能会出问题
        let data = res.data;
        if (data[data.length - 1] == "") {
          //去除最后的空行
          data.pop();
        }
        console.log(data);
      }
    });
  };
},
// 检查编码,引用了 jschardet
checkEncoding(base64Str) {
  // 这种方式得到的是一种二进制串
  let str = atob(base64Str.split(";base64,")[1]);
  // 要用二进制格式
  let encoding = jschardet.detect(str);
  encoding = encoding.encoding;
  if (encoding == "windows-1252") {
    // 有时会识别错误(如UTF8的中文二字)
    encoding = "ANSI";
  }
  return encoding;
}