vue+iview中的table表格导出excel表格

Easter79
• 阅读 1107

一、iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件。

二、实现table表格导出excel文件利用Blob.js 和 Export2Excel.js两个文件实现

  1.Blob.js 和 Export2Excel.js文件

    链接:https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL\_9A 密码:3h82

  2.把Blob.js 和 Export2Excel.js文件添加到src文件夹下的assets的文件夹下的js文件夹里

    在项目下还有有以下操作:

    npm install -S file-saver //用来生成文件的web应用程序

    npm install -S xlsx //电子表格格式的解析器

    npm install -D script-loader //将js挂在在全局下

  vue+iview中的table表格导出excel表格

  3.在Export2Excel.js中配置

  vue+iview中的table表格导出excel表格

  这个地址和需要转换excel文件的页面的文件位置有关系,我的页面文件在assets同级文件夹pages下的home文件夹下。

  这个地址是Blob.js相对于导出excel文件页面的相对位置

  4.代码

 1 handleDownload() {
 2     this.downloadLoading = true;
 3     require.ensure([], () => {
 4         const {export_json_to_excel} = require('../../assets/js/Export2Excel') //这个地址和页面的位置相关,这个地址是Export2Excel.js相对于页面的相对位置
 5         const tHeader = ["序号", "客户", "产品型号", "系列号", "销售日期", "备注"]; //这个是表头名称 可以是iveiw表格中表头属性的title的数组
 6         const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; //与表格数据配合 可以是iview表格中的key的数组
 7         const list = [{
 8                 "index": "1",
 9                 "customerName": "你好1",
10                 "machineModel": "你好2",
11                 "seriesNumber": "你好3",
12                 "shipmentTime": "你好4",
13                 "remarks": "你好5"
14             },
15             {
16                 "index": "2",
17                 "customerName": "hello world 1",
18                 "machineModel": "hello world 2",
19                 "seriesNumber": "hello world 3",
20                 "shipmentTime": "hello world 4",
21                 "remarks": "hello world 5"
22             },
23         ]; //表格数据,iview中表单数据也是这种格式!
24         const data = this.formatJson(filterVal, list)
25         export_json_to_excel(tHeader, data, '列表excel') //列表excel  这个是导出表单的名称
26         this.downloadLoading = false
27     })
28 },
29 formatJson(filterVal, jsonData) {
30     return jsonData.map(v => filterVal.map(j => v[j]))
31 }

5.看了一些前辈的博客,有些差异,自己摸索能够导出excel文件。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
PHP导入导出EXCELl,CSV
PHP导入导出Excel,CSVHTML<formaction"{:U('Admin/Unit/importcsv')}"method"post"name"myform"id"myform"enctype"multipart/formdata"<input
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k