一文带你搞懂Vue中的Excel导入导出

Vue中excel的导入导出

背景

以前的时候我们做添加的时候，是一个一个的进行的，实际情况中有时候需要我们一次性添加多个员工信息，这个时候就需要我们开发一个批量导入的功能：将事先Excel格式的文件批量导入进来

思路

前端主导入(工作大量在前端)

上传Excel文件，把excel文件的内容读出来，还原成js代码中的行列结构，按后端的接口要求回传过去

安装必要的插件(依赖)

这个必要的插件叫做xlsx

npm install xlsx

yarn add xlsx

复制UploadExcel/index.vue文件，代码如下：

<template>
  <div>
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick" />
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      Drop excel file here or
      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
        Browse
      </el-button>
    </div>
  </div>
</template>

<script>
   //导入
import XLSX from 'xlsx'

export default {
     
  props: {
     
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function // eslint-disable-line
  },
  data() {
     
    return {
     
      loading: false,
      excelData: {
     
        header: null,
        results: null
      }
    }
  },
  methods: {
     
    generateData({
       header, results }) {
     
      this.excelData.header = header
      this.excelData.results = results
      this.onSuccess && this.onSuccess(this.excelData)
    },
    handleDrop(e) {
     
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files