vue elementUi导出excel表格功能实现

最新推荐文章于 2024-09-29 14:12:26 发布

weixin_52148270

最新推荐文章于 2024-09-29 14:12:26 发布

阅读量262

点赞数

分类专栏： vue study 文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_52148270/article/details/120194288

版权

本文介绍了在Vue项目中，结合ElementUI实现Excel表格导出功能的详细步骤，包括安装依赖、按需加载、参数介绍、基本结构、时间格式处理及复杂表头的导出。借助js-xlsx库和vue-element-admin提供的方法，实现前端导出功能。

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

vue elementUi导出excel表格功能实现

日常业务中，我们经常遇到excel导出功能，怎么使用呢

Excel 的导入导出都是依赖于js-xlsx来实现的。

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

安装excel所需依赖和按需加载

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

所以你先需要安装如下命令：

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

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {
   
  excel.export_json_to_excel({
   
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

excel导出参数的介绍

vue-element-admin提供了导出的功能模块

参数

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

excel导出基本的结构

我们最重要的一件事，就是把表头和数据进行相应的对应

因为数据中的key是英文，想要导出的表头是中文的话，需要将中文和英文做对应

   const headers = {
   
        '手机号': 'mobile',
        '姓名': 'username',
        '工号': 'workNumber',
      }

然后，完成导出代码

    // 导出excel数据
    exportData() {
   
      //  做操作
      // 表头对应关系
      const headers = {
   
        '姓名': 'username',
        '手机号': 'mobile',
        '工号': 'workNumber',
      }
      // 懒加载
      import('@/vendor/Export2Excel').then(async excel => {
   
        const {
    rows } = await <