放法有多种,我这里是直接转JSON数据为Excel。

1.既然要使用,那首先当然是安装依赖,在终端命令输入:

npm install -S file-saver xlsx  

npm install -D script-loader

2.在项目src文件夹中创建一个文件夹来存放两个第三方js文件,名字就自取了。

3.点击按钮调用exportExcel方法,注意:require('@/Excel/Export2Excel.js')的路径以bulid文件夹下的webpack.base.config.js中alias的声明为准。

// 导出Excel
exportExcel(){
require.ensure([], () => {        
const { export_json_to_excel } = require('@/Excel/Export2Excel.js');  //引入文件      
const tHeader = ['创建时间','订单ID',......]; //表头
const filterVal = ['createTime', 'orderId',......];//table表格中对应的属性名(数据中的字段名)     
const data = this.formatJson(filterVal, this.Cashdata); //表格绑定数据Cashdata转json       
export_json_to_excel(tHeader, data, '订单列表');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},

4.js文件放在我的网盘了 https://pan.baidu.com/s/1lA7-LhDLyN_o-TQ3a4L0wQ  提取码:gswf 。最后就大功告成了。

Vue 导出表格为Excel的更多相关文章

  1. qt技巧--使用html导出表格替代excel

            曾经为qt不能直接导出excel而困扰,后来经过深入了解,得知qt支持xml国际语言,html是xml的一种.html是做网页的,相信大家比较熟悉.所以使用html的<table ...

  2. 【js】js导出表格到excel

    js: function method(tableid) //读取表格中每个单元到EXCEL中 { var curTbl = document.getElementById(tableid); var ...

  3. vue 导出流文件excel

    第一种方法:需要设置响应类型,这里还需要安装 npm install js-file-download --save ,然后引用 var fileDownload = require('js-file ...

  4. vue将表格导出为excel

    vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...

  5. 【vue开发】vue导出Excel表格教程&demo

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...

  6. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  7. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  8. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  9. vue 导出excel后端返回乱码下载不了的解析问题

    有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码  this.download('后端给的导出excel的方法', {        ...this.queryParams  }, ` ...

随机推荐

  1. HNU 11979 Roll call 二分图匹配

    题意: 众所周知,老师经常在班级上点名.点名是从名单上叫一个人的名字或者id来判断名单上这个人是否在场.学生们总是有各种各样的理由不来,所以他们需要其他人帮他们答到.但是打到工作不是这么简单,出于各种 ...

  2. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  3. 面对即将终止支持的server你还能做些什么

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  4. 在Unix上用 BIND建立名称服务器(naem server)

    在Unix上用 BIND建立名称服务器(naem server) 安装 apt install -y bind9 yum install -y bind bind-utils 下载源码并解压缩,htt ...

  5. numpy 数据类型与 Python 原生数据类型

    查看 numpy 数据类型和 Python 原生数据类型之间的对应关系: In [51]: dict([(d, type(np.zeros(1,d).tolist()[0])) for d in (n ...

  6. cookies,sessionStorage和localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  7. POJ 1986 裸的LCA

    思路:搞了一发链剖 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...

  8. BZOJ 3211 线段树+并查集

    思路: 我们很容易发现 一个数开根号 开几(很小)次 就到了1 1 再怎么开 都是1 由于这个性质 我们就可以用并查集 了 //By SiriusRen #include <cmath> ...

  9. Gym - 100203H Highways 最小生成树

    题意:平面上n个点修路,已经修好了m条,再修若干条使得点之间连通,求最小代价的方案. 思路:基本上是裸的最小生成树了,我这里存边直接存在multyset了,取的时候也比较方便,我本来就是这么考虑的,队 ...

  10. Excel 文本内容拆分

    1.首先把文本数据粘贴到excel-->在旁边插入空白列..选择数据-->分列-->固定宽度 2.数据预览点击下一步 3.最后分好的数据就在 归去来兮,田园将芜胡不归?既自以心为形役 ...