Vue导出Excel功能的全过程记录

目录
  • 1.前端主导流程:
  • 2. 插件使用及初始化
    • 2.1  借助vue-admin中提供的方法。
    • 2.2  安装插件依赖。
    • 2.3  回调函数内容如下
  • 3.对后台数据进行处理,完成想要的效果
    • 3.1  准备一个数据处理函数(最后会在回调里面使用)
    • 3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文
    • 3.3  定义表头
    • 3.4  要处理后台返回数据
    • 3.5   表头处理逻辑
    • 3.6 表格data处理逻辑
    • 3.7 函数返回
    • 3.8 最终完成
  • 总结:

1.前端主导流程:

1.点击页面中导出按钮(注册点击事件)

2.事件回调里面,发送请求后台数据

3.对后台数据进行处理,完成想要的效果

4.生成Excel文件

2. 插件使用及初始化

2.1  借助vue-admin中提供的方法。

将其插件包复制粘贴到自己项目下的src文件夹下面

2.2  安装插件依赖。

注:大概率会报错,这个阶段出啥错基本都是依赖没安装,都装上就好了

npm install file-saver script-loader --save

2.3  回调函数内容如下

当我们正式点击`导出`按钮之后,才去加载vendor文件夹中的Export2Excel模块

当我们正式点击`导出`按钮之后,才去加载vendor文件夹中的Export2Excel模块
import('@/vendor/Export2Excel').then(excel => {
  // excel表示导入的模块对象      //import方法执行完毕返回的是一个promise对象,
                                 // 在then方法中我们可以拿到使用的模块对象
  console.log(excel)
  excel.export_json_to_excel({
    header: ['姓名', '工资'], // 表头 必填
    data: [
      ['刘备', 100],         //重点关注data的配置部分,我们发现它需要一个严格的二维数组
      ['关羽', 500]
    ], // 具体数据 必填
    filename: 'excel-list', // 文件名称
    autoWidth: true, // 宽度是否自适应
    bookType: 'xlsx' // 生成的文件类型
  })
})

Excel导出参数说明

注意:到这里为止,其实已经完成了简单的导出效果,用的是自己写的假数据。实际项目中肯定是拿的后台返回的数据,并且要对格式做修改,达到我们想要的效果(真测试了,上面的步骤跟着做就可完成。) 效果如下:

3.对后台数据进行处理,完成想要的效果

比如说后台返回的表头是英文需要转化成中文,然后格式不是插件要的格式。

后台返回数据:

需要将key转成中文,将value抓换成数组。

3.1  准备一个数据处理函数(最后会在回调里面使用)

3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文

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

3.3  定义表头

header = [待会将英文的表头转成中文的,是个数组的形式]

如下代码所示效果:

header = ['id', 'mobile', 'username',……]

3.4  要处理后台返回数据

后台返回数组,定义one是第一个数据,目的是以第一个数据为样本设置表头,如果第一条数据是false的话,说明后台啥也没返回,那就全剧终。

如下代码所示效果:

const one = list[0]
      if (!one) {
        return { header, data }
      }

3.5   表头处理逻辑

01   `Object.keys(one) `   这个是遍历对象取出key组成一个数组。

02    ` map`     方法遍历对每一个项进行做事返回一个数组

03     `return map[key] `   可以看做 map.id = '编号'(便于理解);map方法不停的对map对象做事而map[key]其实就是值,如 ‘编号'、‘部门'… 然后组成一个数组 如:['姓名', '工资']

header = Object.keys(one).map(key => {
        return map[key]
      })

3.6 表格data处理逻辑

目标:后台返回正式员工和非正式员工用1和2表示,我们需要将数字转成文字,并且需要让他们变成数组的格式。

01-首先后台返回的Obj['formOfEmployment']是数字1 , 2   我们要他们变成---> '正式', '非正式'

02-obj['formOfEmployment'] = hireTypEnmu[key] 这段代码意思是将汉字设置给左边的数字,实现替换。我们分别看左右代表什么。

03- obj['formOfEmployment'] 此时是数字

04-hireTypEnmu:{1:'正式', '2':'非正式' }这是我们自己定义的对象

05-hireTypEnmu[key]  --key是数字--所以他是value是汉字

如下代码所示效果:

// data把list中每一个对象转成 对应的value数组
 // hireTypEnmu:{1:'正式', '2':'非正式' }
      data = list.map(obj => {
        // 把  Obj['formOfEmployment']: 1 , 2   ---> '正式', '非正式'
        const key = obj['formOfEmployment'] // 1, 2
        obj['formOfEmployment'] = hireTypEnmu[key]

        return Object.values(obj)
      })

3.7 函数返回

将处理好的数据返回

return { header, data }

3.8 最终完成

这个时候,将这个函数拿到回调函数里面,header和data的数据之前已经有了。

完成代码如下:

hExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 发ajax请求,获取数据
        const res = await getEmployee(this.page, this.size)
        const list = res.data.rows
        console.log('从后端获取的数据', list)

        const { header, data } = this.formatData(list)
        // excel表示导入的模块对象
        console.log(header, data)
        excel.export_json_to_excel({
          // header: ['姓名', '工资'], // 表头 必填
          header: header, // 表头 必填
          data: data,
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },

总结:

以上代码经过测试,可以直接使用达成效果。

附:vue-element-admin码云拉取,这个版本是二次开发功能多的那款

# git clone https://github.com/panjiachen/vue-element-admin.git  # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install  # 安装所有依赖
$ npm run dev  # 启动开发调试模式  查看package.json文件的scripts可知晓启动命令

到此这篇关于Vue导出Excel功能的文章就介绍到这了,更多相关Vue导出Excel功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue2.0实现将页面中表格数据导出excel的实例

    这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Vue导出json数据到Excel电子表格的示例

    网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js

  • 详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • Vue结合后台导入导出Excel问题详解

    最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

  • vue.js中导出Excel表格的案例分析

    有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.导入两个JS 下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from '

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • vue中导出Excel表格的实现代码

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装3个依赖,file-saver.xlsx和script-loader. 使用npm安装: npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装: yarn add file-saver xlsx -S yarn ad

  • Vue+axios+WebApi+NPOI导出Excel文件实例方法

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.

  • vue+element表格导出为Excel文件

    本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下 安装这三个依赖 npm install xlsx file-saver -S npm install script-loader -S -D 组件代码 <template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> &l

随机推荐