vue实战(15)——基于Element上传Excel读取内容

image.png

1、应用场景

大多数管理后台很多情况会有批量上传数据的业务，用的最多的要数Excel上传，根据不同的业务场景有两种上传方式：

对于数据量很大的情况，需要后端提供上传的接口，像上传图片视频一样，数据解析和提取都由后端来处理，表格内容不太多的情况下单次10000条以上（单次上传量还要根据自己的项目情况而定）一般会选择这种方式，数据量太大浏览器读取的速度远远小于服务端读取
对于数据量不太大的情况，一般单次上传10000条以内的，可以通过前端读取传给后端来处理，这种适用于大部分场景，而前端只需要封装个组件即可，每次按需求读取或处理好数据返给后端

2、封装组件

读取Excel同样需要依赖xlsx这个插件，之前文章有Excel导出的文章，这里就不多解释，原理都差不多，通过解析读取Excel内容然后输出

<template>
  <span class="content" @click="btnClick">
    <input id="upload-file" class="input-file" type="file" @change="exportData"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    {{title}}
  </span>
</template>

<script>
  import XLSX from 'xlsx'
  export default {
    name: "importExcelCommon",
    props: {
      title: {
        type: String,
        default: '导入表格'
      }
    },
    methods: {
      btnClick() {
        document.getElementById('upload-file').click();
      },
      exportData(event) {
        if(!event.currentTarget.files.length) {
          return;
        }
        const that = this;
        // 拿取文件对象
        let f = event.currentTarget.files[0];
        // 用FileReader来读取
        let reader = new FileReader();
        // 重写FileReader上的readAsBinaryString方法
        const rABS = true;
        reader.onload = e => {
          let dataResult = e.target.result;
          if (!rABS) dataResult = new Uint8Array(dataResult);
          const workbook = XLSX.read(dataResult, {
            type: rABS ? 'binary' : 'array',
          });
          // 假设我们的数据在第一个标签
          const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
          // XLSX自带了一个工具把导入的数据转成json
          const jsonArr = XLSX.utils.sheet_to_json(firstWorksheet, { header: 1 });
          // 通过自定义的方法处理Json，比如加入state来展示
          that.$emit("getResult", jsonArr);
          document.getElementById('upload-file').value = null;
        };
        if (rABS) reader.readAsBinaryString(f);
        else reader.readAsArrayBuffer(f);
        return false;
      },
    }
  }
</script>

<style scoped>
  .input-file {
    display: none;
  }
  .content{
    margin-right: 5px;
  }
</style>

3、父组件调用

<template>
  <div class="box">
    <import-excel-common title="上传" @getResult="getMyExcelData"></import-excel-common>
  </div>
</template>
<script>
    import importExcelCommon from '@/components/importExcelCommon'
    export default {
      components: {
        importExcelCommon
      },
      methods: {
        getMyExcelData(data){
          // data为读取Excel的原始数据，这里可以对Excel进行格式校验和数据格式化处理
          console.log(data);
        }
    }

读取Excel返回数据

上传Excel模版