一、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挂在在全局下

  

  3.在Export2Excel.js中配置

  

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

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

  4.代码

  

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

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

vue+iview中的table表格导出excel表格的更多相关文章

  1. Element-ui组件库Table表格导出Excel表格

    安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...

  2. VUE中使用XLSX实现导出excel表格

    简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...

  3. Vue项目中将table组件导出Excel表格以及打印页面内容

    体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...

  4. 【前端】将前台table数据导出excel表格

    1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2exce ...

  5. vue项目实现表格导出excel表格

    第一:安装依赖 npm install -S file-saver xlsx npm install -D script-loader 第二:在目录里新建excel文件夹 在excel文件夹里新建两个 ...

  6. vue中导出Excel表格

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...

  7. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  8. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  9. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

随机推荐

  1. hibernate第三天 一对多 , 多对多

    1.1. 阐述你对inverse的理解 答: 1.inverse的默认值是false,代表不放弃外键维护权,配置值为true,代表放弃了外键的维护权. 2.双方维护外键会多产生update语句,造成浪 ...

  2. U盘文件或目录损坏且无法读取怎么解决

    转自 http://jingyan.baidu.com/article/020278118afaec1bcc9ce5df.html U盘文件或目录损坏且无法读取怎么解决 听语音 | 浏览:37504 ...

  3. EZOJ #78

    传送门 分析 AC自动机板子题qwq 不过似乎可以哈希(因为所有模式串的长度相同,所以哈希乱搞就可以) 代码 #include<iostream> #include<cstdio&g ...

  4. java IO的总结

    1: fileChannel 没有bufferedreader快, bufferedreader 可设置缓冲大小和编码 2: bufferedreader 的readline 遇到回车也换行

  5. Umbraco中如何找到home node

    在一个Umbraco项目中,我们经常会出现需要找到这个项目的home node的情况, 那么如何来找到项目的home node呢 方法如下: 1. 在View中 @inherits Umbraco.W ...

  6. 远程桌面--------ms12-020 漏洞复现 (死亡蓝屏)

    漏洞名:MS12-020(全称:Microsoft windows远程桌面协议RDP远程代码执行漏洞) 介绍:RDP协议是一个多通道的协议,让用户连上提供微软终端机服务的电脑. windows在处理某 ...

  7. python开发[第二篇]------str的7个必须掌握的方法以及五个常用方法

    在Python中 基本数据类型有 str int boolean list dict tuple等 其中str的相关方法有30多个 但是常用的就以下7个 join  # split # find # ...

  8. C 标签使用

    JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...

  9. SqlBulkCopy(批量复制)使用方法 && SqlDataAdapter Update

    SqlBulkCopy提供了一种将数据复制到Sql Server数据库表中高性能的方法.SqlBulkCopy 包含一个方法 WriteToServer,它用来从数据的源复制数据到数据的目的地. Wr ...

  10. C#中的线程池使用(二)

    线程池是后台线程.每个线程都使用默认的堆栈大小,以默认的优先级运行,并处于多线程单元中.每个进程只有一个线程池对象. 下面说一下线程池中的异常,在线程池中未处理的异常将终止进程.以下为此规则的三种例外 ...