vue解析excel,csv为JSON记录

1、官网文档

读取excel文件  Reading Files | SheetJS Community Edition

读取csv文件  Documentation - Papa Parse

编码解析GitHub - aadsm/jschardet：JavaScript 中的字符编码自动检测（python's chardet 的端口）

2、安装xlsx、csv、编码解析

npm i xlsx;

npm i papaparse;

npm i jschardet;

 3、引入解析插件

import Xlsx from 'xlsx';

import Papa from 'papaparse';

4、解析excel为JSON 

uploadFile(file) {
      // 拿到所导入文件的名字(file是input标签拿到的文件信息)
      let fileName = file
      //定义reader，存放文件读取方法
      let reader = new FileReader()
      //启动函数
      reader.readAsBinaryString(fileName)
      //onload在文件被读取时自动触发
      reader.onload = e => {
        try {
          //workbook存放excel的所有基本信息
          const workbook = Xlsx.read(e.target.result, {
            type: 'binary',
            cellDates: true
          })
          //定义sheetList中存放excel表格的sheet表，就是最下方的tab
          let sheet = workbook.SheetNames[0] // 工作表名称(选第一个sheet)
          let worksheet = workbook.Sheets[sheet] // 只能通过工作表名称来获取指定工作表
          let results = Xlsx.utils.sheet_to_json(worksheet, { header: 1, range: 0 }) // Xlsx解析工作表信息 header: 1 含表头  range: 0 从第一行开始读取不设置从有实际内容开始读取
          this.fieldDateList = results // 这里results就是我们要拿到的信息
          this.$emit("fieldDateListFun", this.fieldDateList);
        } catch (error) {
          this.$message.warning('文件类型不正确！')
        }
      }
},

 5、解析csv文件为JSON

// 上传文件解析csv
importCsv(file) {
      let selectedFile = file;
      var reader = new FileReader();
      reader.readAsDataURL(selectedFile);
      reader.onload = evt => {
        // 检查编码,支持不同语言
        let encoding = this.checkEncoding(evt.target.result);
        // 将csv转换成二维数组
        Papa.parse(selectedFile, {
          encoding: encoding,
          complete: res => {
            // UTF8 \r\n与\n混用时有可能会出问题
            let results = res.data;
            if (results[results.length - 1] === "") {
              //去除最后的空行
              results.pop();
            }
            this.fieldDateList = results
            this.$emit("fieldDateListFun", this.fieldDateList);
          }
        });
      };
},
// 编码转换
checkEncoding(base64Str) {
   // 这种方式得到的是一种二进制串
   let str = atob(base64Str.split(';base64,')[1])
   // 要用二进制格式
   const jschardet = require("jschardet");
   let encoding = jschardet.detect(str)
   encoding = encoding.encoding
   if (encoding === 'windows-1252') {
     encoding = 'ANSI'
   }
   return encoding
},

6、结合若依FileUpload使用，能不大改就不大改

// 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.$modal.closeLoading();
        // 上传结束解析文件
        if (this.fieldDate) {
          switch (this.file.name.split('.')[this.file.name.split('.').length - 1]) {
            case "csv":
              this.importCsv(this.file)
              break;
            case "CSV":
              this.importCsv(this.file)
              break;
            case "xlsx":
              this.uploadFile(this.file)
              break;
            case "xls":
              this.uploadFile(this.file)
              break;
          }
        }
      }
    },

7、结合input框实时读取第n行内容

// 读取某行表格 this.fileListNow为4、5拿到的解析数组，tempNum为第n行
fileListNowFun(tempNum, ev = this.fileListNow) {
      // 转换为后端数据
      let fileListOld = []
      // 读取指定行数的内容
      if (ev.length !== 0 && tempNum <= ev.length) {
        // 单行表头
        let tempFileListOld = ev[tempNum - 1]
        if (tempFileListOld.length !== 0) {
          // 字符串不为空时，转换字段
          tempFileListOld.map((v, i, a) => {
            if (!!v) {
              // 转换字段
              fileListOld.push({
                tempOne:v
              })
            }
          })
        }
      }
      // 没有列表时页面存在至少一条数据
      if (fileListOld.length === 0) {
        fileListOld = [{
          temp:''
        }]
      }
      this.$emit("fileListNewFun", fileListOld)
}