一、Excel导入

最近学习到了一个新技能点：Excel导入导出。不难，但实用！在后管项目中，有时候需要批量添加数据，这个时候我们就需要开发一个批量导入的功能，事先把数据写入excel表格，再一次批量导入。

操作步骤分为以下三步：

后端提供一个excel模板文件
用户填写这个excel模板文件
上传这个文件，实现批量导入功能

参考vue-admin-element中的已有的方案，解决需求：

1、首先定义相关组件：

从vue-admin-element模板中，把需要用到的组件cv到自己的项目中，文件目录：src/components/UploadExcel/index.vue。如果没有vue-admin-element模板源码，可以去文章末尾自行拉取。

2、下载相关依赖包：xlsx。

这里注意版本号是0.14.1！！！

下载命令：npm install xlsx@0.14.1 --save

3、使用组件

在自己项目中定义父组件，使用刚才定义好的组件。upload-excel-component 组件中引入了XLSX包，需要提供两个props：

beforeUpload：上传之前的函数
onSuccess: 成功调用之后的函数

<template>
  <div class="app-container">
  使用子组件
    <upload-excel-component
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    // 上传之前的函数
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 上传成功后执行的函数
    handleSuccess({ results, header }) {
      console.log('读出来的excel的内容是', results, header)
      this.tableData = results
      this.tableHeader = header
    },
  }
}
</script>

这里导入以下格式的excel为例，观察console.log('读出来的excel的内容是', results, header)这句代码的执行结果：

可以看到results拿到的结果是表格内容部分信息，信息存在数组中，每一行对应数组中的每一个对象。header拿到的是表头信息。

二、Excel导出

导出总体来讲与导入大相径庭

参考vue-admin-element中的已有的方案，解决需求：

1、将工具文件复制到自己的项目中

文件目录：src/vendor。如果没有vue-admin-element模板源码，可以去文章末尾自行拉取。

2、下载相关依赖包：file-saver,xlsx,script-loader

插件包位于src/vendor/export2Excel.js文件中。

npm install file-saver script-loader xlsx@0.14.1 --save

3、给导出按钮添加点击事件

事件执行函数内容如下：

// 采用按需引入的方式，需要用到导出功能时，插件才会被引入到应用里
import('@/vendor/Export2Excel').then(excel => {
  // excel表示导入的模块对象
  console.log(excel)
  excel.export_json_to_excel({
    header: ['姓名', '工资'], // 表头 必填
    data: [
      ['刘备', 100],
      ['关羽', 500]
    ], // 具体数据 必填
    filename: 'excel-list', // 文件名称
    autoWidth: true, // 宽度是否自适应
    bookType: 'xlsx' // 生成的文件类型
  })
})

以上代码表示:

当我们正式点击导出按钮之后，才去加载vendor文件夹中的Export2Excel模块
import方法执行完毕返回的是一个promise对象，在then方法中我们可以拿到使用的模块对象
重点关注data的配置部分，我们发现它需要一个严格的二维数组 excel导出参数说明 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | header | 导出数据的表头 | Array | / | [] | | data | 导出的具体数据 | Array | / | [[]] | | filename | 导出文件名 | String | / | excel-list | | autoWidth | 单元格是否要自适应宽度 | Boolean | true / false | true | | bookType | 导出文件类型 | String | xlsx, csv, txt, more | xlsx |

三、总结

前端主导实现Excel导入需要把数据转换为后端接口所需要的数据格式，导出则需要从后端把数据拿回来转为Excel所需要的格式填入header和data，简单一点的数据还好，稍微复杂一点的嘎嘎头疼。所以在公司要跟后端小哥打好关系哦。

咱不生产代码，咱只是代码的搬运工，花裤衩嘎嘎牛！

代码放在码云啦utils: cv过来的小工具---持续更新 (gitee.com)

前端主导实现Excel导入导出