vue导入导出excel--中文表头的处理

一般导入模板都是英文的表头,如果命名看不懂的话就很麻烦,excel传进来之后直接将中文表头改成固定顺序的英文表头可以处理这个问题,vue项目中的excel文件的导入(表头顺序写死)
但我想试一下能不能不固定顺序(虽然写完之后感觉没啥意义= =),就分享一下看看有没人用的上吧。
导入excel的大框架是使用的这篇文章的内容纯前端实现excel表格导入导出

原本导出/导入模板
原本
现在导出/导入模板
现在

导出时表头改中文:
原文代码:

downloadFile: function (rs) { // 点击导出按钮
        let data = [{}]
        for (let k in rs[0]) {
          data[0][k] = k
        }
        data = data.concat(rs)
        this.downloadExl(data, '菜单')
      },
data () {
      return {
        fullscreenLoading: false, // 加载中
        imFile: '', // 导入文件el
        outFile: '',  // 导出文件el
        errorDialog: false, // 错误信息弹窗
        errorMsg: '', // 错误信息内容
        excelData: [  // 测试数据
          {
            name: '红烧鱼', size: '大', taste: '微辣', price: '40', remain: '100'
          },
          {
            name: '麻辣小龙虾', size: '大', taste: '麻辣', price: '138', remain: '200'
          },
          {
            name: '清蒸小龙虾', size: '大', taste: '清淡', price: '138', remain: '200'
          },
          {
            name: '香辣小龙虾', size: '大', taste: '特辣', price: '138', remain: '200'
          },
          {
            name: '十三香小龙虾', size: '大', taste: '中辣', price: '138', remain: '108'
          },
          {
            name: '蒜蓉小龙虾', size: '大', taste: '中辣', price: '138', remain: '100'
          },
          {
            name: '凉拌牛肉', size: '中', taste: '中辣', price: '48', remain: '60'
          },
          {
            name: '虾仁寿司', size: '大', taste: '清淡', price: '29', remain: '无限'
          },
          {
            name: '海苔寿司', size: '大', taste: '微辣', price: '26', remain: '无限'
          },
          {
            name: '金针菇寿司', size: '大', taste: '清淡', price: '23', remain: '无限'
          },
          {
            name: '泡菜寿司', size: '大', taste: '微辣', price: '24', remain: '无限'
          },
          {
            name: '鳗鱼寿司', size: '大', taste: '清淡', price: '28', remain: '无限'
          },
          {
            name: '肉松寿司', size: '大', taste: '清淡', price: '22', remain: '无限'
          },
          {
            name: '三文鱼寿司', size: '大', taste: '清淡', price: '30', remain: '无限'
          },
          {
            name: '蛋黄寿司', size: '大', taste: '清淡', price: '20', remain: '无限'
          }
        ]
      }
    },

变更后:

downloadFile: function (rs) { // 点击导出按钮
                var Model = new Map([['name', '名称'], ['size', '分量'], ['taste', '口味'], ['price', '单价'], ['remain', '剩余']])

                let data = [{}]
                	//for (let k in rs[0]) {  //导出数据用这个
                    for (let k in this.excelDataModel[0]) {//导出模板
                    data[0][k] = Model.get(k)
                }
                data = data.concat(rs)
                //console.log(data)
                this.downloadExl(data, '菜单')
            },
data() {
            return {
                fullscreenLoading: false, // 加载中
                imFile: '', // 导入文件el
                outFile: '',  // 导出文件el
                errorDialog: false, // 错误信息弹窗
                errorMsg: '', // 错误信息内容
                excelData: [],//这里我把初始信息删了,所以每次测试要先导入一次,其实保持原样也可以
                excelDataModel: [{//我的模板
                    name: '',
                    size: '',
                    taste: '',
                    price: '',
                    remain: ''
                }]
            }
        },

导入时中文表头转英文:
原文代码:

  importFile: function () { // 导入excel
    this.fullscreenLoading = true
    let obj = this.imFile
    if (!obj.files) {
      this.fullscreenLoading = false
      return
    }
    var f = obj.files[0]
    var reader = new FileReader()
    let $t = this
    reader.onload = function (e) {
      var data = e.target.result
      if ($t.rABS) {
        $t.wb = XLSX.read(btoa(this.fixdata(data)), {  // 手动转化
          type: 'base64'
        })
      } else {
        $t.wb = XLSX.read(data, {
          type: 'binary'
        })
      }
      let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]])
      console.log(typeof json)
      $t.dealFile($t.analyzeData(json)) // analyzeData: 解析导入数据
    }
    if (this.rABS) {
      reader.readAsArrayBuffer(f)
    } else {
      reader.readAsBinaryString(f)
    }
  },
analyzeData: function (data) {  // 此处可以解析导入数据
        return data
      },

变更后:

            importFile: function () { // 导入excel
                this.fullscreenLoading = true
                let obj = this.imFile
                if (!obj.files) {
                    this.fullscreenLoading = false
                    return
                }
                var f = obj.files[0]
                var reader = new FileReader();
                let $t = this;
                reader.onload = function (e) {
                    var data = e.target.result;

                    $t.wb = XLSX.read(data, {
                        type: 'binary'
                    });
                    let Sheets = $t.wb.Sheets[$t.wb.SheetNames[0]];
                    $t.analyzeData(Sheets);//处理中文表头
                    let json = XLSX.utils.sheet_to_json(Sheets);
                    $t.dealFile(json) // analyzeData: 解析导入数据
                };
                reader.readAsBinaryString(f)
            },
analyzeData: function (Sheets) {  // 此处可以解析导入数据
                let Split1 = (Sheets['!ref']).split(':')[1];//表格范围

                let s = '';
                for (let i = 0;i<Split1.length;i++) {
                    if (!/^[0-9]*$/.test(Split1[i])) {
                        s += Split1[i];
                    }
                }
                s+='1';//表头的最后一个所在的位置英文部分
                var Model = new Map([['名称', 'name'], ['分量', 'size'], ['口味', 'taste'], ['单价', 'price'], ['剩余', 'remain']])

                for (let i in Sheets){
                    if(Sheets[i]['v']){
                        Sheets[i]['w'] = Model.get(Sheets[i]['v'])
                    }
                    if(i==s)break;
                }
                return Sheets
            },
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值