Vue中如何实现Excel导入导出

这篇具有很好参考价值的文章主要介绍了Vue中如何实现Excel导入导出。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目标

在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐
因此需要我们开发一个批量导入的功能,将用户的信息存储到 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'
  1. Excel 的导入导出都是依赖于js-xlsx来实现的,

  2. js-xlsx的基础上又封装了Export2Excel.js来方便导出数据

  3. 由于 Export2Excel不仅依赖js-xlsx还依赖file-saverscript-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] = item[key]
          }
      })

      return obj
    })
  },

  // 导入成功以后的回调函数
  handleSuccess({ results, header }) {
    const arr = this.transExcel(results)
    console.log('转换之后的格式是', arr)
  }
}

上面用到的日期处理函数在 utils/index.js 中定义如下

// 把excel文件中的日期格式的内容转回成标准时间
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

小结 表格读出中文key对象, 如何转换英文key的对象的?

  • 准备一个中文key和英文key映射关系的对象, 然后遍历数据里所有中文key拿出来, 换取英文key
  • 再准备一个新的对象, 组织英文key和value值

调用接口

// 导入成功以后的回调函数
async handleSuccess({ results, header }) {
    const arr = this.transExcel(results)
    const res = await importEmployeeAPI(arr).catch(err => err)
    if (!res.success) return this.$message.error(res.message)
    this.$router.back()
    this.$message.success('操作成功')
}

3. Excel导出

分析
  1. 把vue-element-admin 中的导出功能,迁移本项目
  2. 使用静态数据实现基础的导出功能(先不使用从接口获取的数据)

给导出按钮添加点击事件
<el-button type="success" size="small" @click="downloadExcel">导出excel</el-button>

// 导出excel按钮->点击事件
downloadExcel() {
    import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        excel.export_json_to_excel({
            header: ['姓名', '工资'], // 表头 必填
            data: [
                ['刘备', 100],
                ['关羽', 500]
            ], // 具体数据 必填
            filename: 'excel-list', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
        })
    })
}

以上代码表示:

  1. 当我们正式点击导出按钮之后,才去加载 vendor 文件夹中的Export2Excel模块
  2. import 方法执行完毕返回的是一个 promise 对象,在then方法中我们可以拿到使用的模块对象
  3. 重点关注 data 的配置部分,我们发现它需要一个严格的二维数组

Excel导出参数说明:

参数 说明 类型 可选值 默认值
header 导出数据的表头 Array / []
data 导出的具体数据 Array / [[]]
filename 导出文件名 String / excel-list
autoWidth 单元格是否要自适应宽度 Boolean true / false true
bookType 导出文件类型 String xlsx, csv, txt, more xlsx
Excel导出尝试实现

分析:

  1. 从后台重新获取数据(这样才能确保是最新的)
  2. 对数据的格式进行转换(后端给的数据字段名都是英文的),以用来做导出

核心在于把后端接口返回的数据转成 Export2Excel 这个插件需要的格式

准备表头header数据
因为接口中返回的数据中的key是英文,而我们期望导出的表头是中文,所以提前准备中文和英文的映射关系

const map = {
  'id': '编号',
  'password': '密码',
  'mobile': '手机号',
  'username': '姓名',
  'timeOfEntry': '入职日期',
  'formOfEmployment': '聘用形式',
  'correctionTime': '转正日期',
  'workNumber': '工号',
  'departmentName': '部门',
  'staffPhoto': '头像地址'
}

具体的表格数据我们需要通过接口从后端获取回来,难点在于如何把后端返回的数据处理成Export2Excel插件需求的二维数组格式。

示例

const dataArr = [
 ["13600000001", "吕勇锐", "1992-08-04", "正式", "2020-01-01", "0001", "总裁办"]
 ["13600000002", "袁永安", "1993-08-04", "正式", "2020-01-01", "0002", "总裁办"]
]

最终的代码

methods: {
    // 处理数据的方法
    transData(rows) {
        // 写代码
        const map = {
            'id': '编号',
            'password': '密码',
            'mobile': '手机号',
            'username': '姓名',
            'timeOfEntry': '入职日期',
            'formOfEmployment': '聘用形式',
            'correctionTime': '转正日期',
            'workNumber': '工号',
            'departmentName': '部门',
            'staffPhoto': '头像地址'
        }

        const headerKeys = Object.keys(rows[0])
        const header = headerKeys.map(item => {
            return map[item]
        })

        const data = rows.map(obj => {
            return Object.values(obj)
        })

        return { header, data }
    }
    // 导出 Excel
    async downloadExcel() {
        const res = await getEmployeeList()
        // 调用上面定义的方法,处理返回的数据
        const excelObj = this.transData(res.data.rows)
        import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            excel.export_json_to_excel({
                header: excelObj.header, // 表头 必填
                data: excelObj.data, // 具体数据 必填
                filename: '员工列表', // 文件名称
                autoWidth: true, // 宽度是否自适应
                bookType: 'xlsx' // 生成的文件类型
            })
        })
    },
}

优化处理方法:数据顺序对应文章来源地址https://www.toymoban.com/news/detail-413436.html

transData(rows) {
 // 考虑顺序 (页面上列保持一致顺序)
      // 4.0 准备一个列表头中文数组 (8个)
      const headerArr = ['序号', '姓名', '头像', '手机号', '工号', '聘用形式', '部门', '入职时间']
      // 4.1 数据key的映射关系(思路: 遍历上边数组里按照顺序, 取出中文的名字, 但是对应数组值的数组, 要从英文key对象中取出value值, 我要用中文key换到英文key然后去取到值)
      const myObj = {
        // 序号可以等遍历的时候直接用索引值, 而不是来自于英文对象里
        '姓名': 'username',
        '头像': 'staffPhoto',
        '手机号': 'mobile',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '入职时间': 'timeOfEntry'
      }
      // 4.2 按照顺序, 形成值的数组 (明确目标->想要数据结构->读代码(每个变量意思)读2-3遍->仿写3-5遍)
      const resultArr = rows.map((item, index) => {
        const valueArr = [] // 值小数组
        headerArr.forEach(zhKey => {
          if (zhKey === '序号') {
            valueArr.push(index + 1)
          } else {
            const enKey = myObj[zhKey]
            valueArr.push(item[enKey])
          }
        })
        return valueArr
      })

      return { header: headerArr, data: resultArr }
    }

到了这里,关于Vue中如何实现Excel导入导出的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(55)
  • Vue3 导入导出Excel

    提供一个 Excel 文件,将里面的内容导出成 JSON 数组 提供一个 JSON 数组,生成 Excel 文件并下载 表格 1. 安装步骤 2.使用 3.导出 导出之后发现数据结构不是我们想要的那种,此时就能通过以下方法转换。 更改列宽 4.导入 如果excel中含有日期,需要解析时间格式的内容。 XLSL.re

    2024年02月14日
    浏览(41)
  • vue+element UI Excel导入导出

     1.终端执行命令 2.script中导入 3.单表头效果图 4.html代码:  

    2024年02月04日
    浏览(34)
  • POI 实现Excel导入导出

    什么是POI Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能。POI为“Poor Obfuscation Implementation”的首字母缩写,意为“简洁版的模糊实现”。 生成xls和xlsx有什么区别呢? XLS XLSX 只能打开xls格式,无法直接打开x

    2024年02月03日
    浏览(40)
  • SpringBoot实现Excel导入导出

    话不多说,直接上代码 依赖文档 找到pom文件,如下图所示 引入需要的依赖 导出写法: 导入写法: 已上就是导入导出

    2024年02月09日
    浏览(38)
  • 【Go】excelize库实现excel导入导出封装(三),基于excel模板导出excel

    大家好,这里是符华~ 关于excelize库实现excel导入导出封装,我已经写了两篇了,我想要的功能基本已经实现了,现在还差一个模板导出,这篇文章就来讲讲如何实现用模板导出excel。 前两篇: 【Go】excelize库实现excel导入导出封装(一),自定义导出样式、隔行背景色、自适应

    2024年01月25日
    浏览(53)
  • 使用luckysheet实现excel导入导出

    luckysheet-demo: luckysheet-demoexcel导入导出实例 使用组件 1. luckysheet在线excel 2. luckyexcel excel导入插件 3. exceljs 导出excel数据 导出exceljs的二次封装,可直接使用如下

    2024年02月12日
    浏览(45)
  • 纯前端实现 导入 与 导出 Excel

    最近经常在做 不规则 Excel 的导入,或者一些普通 Excel 的导出,当前以上说的都是纯前端来实现;下面我们来聊聊经常用到的Excel导出与导入的实现方案,本文实现技术栈以 Vue2 + JS 为例 导入分类: 调用 API 完全由后端来解析数据,清洗数据,前端只负责调用 API ; 前端解析

    2024年02月09日
    浏览(41)
  • EasyExcel实现Excel文件导入导出功能

    Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行,但是一旦并发上来后一定会OOM或者JVM频繁的full gc。 EasyExcel是阿里巴巴开源的一个excel处理框架,以使用简单、节省内存著称。

    2024年02月02日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包