Vue中如何实现Excel导入导出

caicai0088

已于 2022-10-25 10:36:26 修改

阅读量6.3k

点赞数 1

文章标签： vue.js excel 前端

于 2022-10-25 10:35:31 首次发布

本文链接：https://blog.csdn.net/m0_73975292/article/details/127508184

版权

本文详细介绍了在Vue项目中实现Excel导入导出的方法。首先分析了vue-element-admin的导入方案，接着讲解了如何处理Excel导入，包括数据格式转换、字段中文转英文、日期处理等关键步骤。最后探讨了Excel导出的实现，涉及到数据转换、导出参数配置等。整个过程旨在简化批量数据操作，提高工作效率。

摘要由CSDN通过智能技术生成

目标

在前面员工的添加是一个一个进行的，如果一次性添加多个员工信息，这时候就会很繁琐
因此需要我们开发一个批量导入的功能，将用户的信息存储到 excel 中然后进行批量导入

实现方式

1. 分析 vue-element-admin 中的导入方案

在vue-element-admin中，大佬已经封装好了Excel的导入导出方案，我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中

讲解

导入相关的代码文件有两个：

使用组件：src/views/excel/upload-excel.vue
定义组件：src/components/UploadExcel/index.vue // 注册全局组件
- 最新版的xlsx包, 导出的方式改变了, 所以我们要修改UploadExcel组件代码

// import XLSX from 'xlsx'
// 上面改成下面这样, 按需引入所有然后形成一个对象保存到XLSX变量上
import * as XLSX from 'xlsx'

Excel 的导入导出都是依赖于js-xlsx来实现的，
在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader，因此我们需要提前安装
- file-saver 用户在客户端保存文件的
- script-loader 用于在前端执行一次js脚本文件的

npm install xlsx file-saver -S
npm install script-loader -S -D

tips:-S和-D (默认就是–save不写即可, -S -D(是–save-dev)

2. Excel导入

目标

数据格式转换：将 excel 解析好的数据经过处理后，转成可以传给接口调用的数据

分析

调用接口进行excel上传的重点其实是数据的处理
按照接口的要求，把 excel 表格中经过插件处理好的数据处理成后端接口要求的格式

实现

按接口要求，处理excel导入的数据。处理内容包含：

字段中文转英文。excel中读入的是姓名,而后端需要的是username
日期处理。从excel中读入的时间是一个 number 值，而后端需要的是标准日期

代码（逻辑很重要，多写几遍）

methods: {
   
  // 将表格中的数据进行格式化
  transExcel(results) {
   
    const userRelations = {
   
      '入职日期': 'timeOfEntry',
      '手机号': 'mobile',
      '姓名': 'username',
      '转正日期': 'correctionTime',
      '工号': 'workNumber',
      '部门': 'departmentName',
      '聘用形式': 'formOfEmployment'
    }

    return results.map(item => {
   
      const obj = {
   }

      // 1. 取出这个对象所有的属性名： ['姓名'， ‘手机号’]
      // 2. 遍历这个数组，通过 中文名去 userRelations 找对应英文名， 保存值
      const contentKeys = Object.keys(item)
      contentKeys.forEach(key => {
   
        // 找到对应的英文名
        const transKey = userRelations[key]
        // 如果格式化的是时间，需要进行转换
        if (transKey === 'timeOfEntry' || transKey === 'correctionTime') {
   
            // 表格的天数->转成日期对象
            const transDate = new Date(formatExcelDate(item[key]))
            // 再把日期对象转成->'年-月-日'保存到对象属性里给后台
            obj[transKey] = parseTime(transDate, '{yyyy}-{mm}-{dd}')
          } else {
   
            obj[transKey