放法有多种,我这里是直接转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. appium使用教程(二)-------------连接手机

    1. 安装驱动 说明:如果驱动装不上,可以使用第三方的工具去安装.(一般来说还是用第三方) 大概就是这个样子索. 2. 开启usb调试 1)开发者选项打开(不知道怎么打开的问度娘) 2)开启USB调试 ...

  2. 洛谷3871 [TJOI2010]中位数 维护队列的中位数

    题目描述 给定一个由N个元素组成的整数序列,现在有两种操作: 1 add a 在该序列的最后添加一个整数a,组成长度为N + 1的整数序列 2 mid 输出当前序列的中位数 中位数是指将一个序列按照从 ...

  3. python-排序算法 冒泡和快速排序

    交换排序 交换排序有冒泡排序和快速排序 冒泡排序 冒泡排序就是每次找出最大(最小)元素,放在集合最前或最后,这是最简单的排序算法 print("未排序之前:",collection ...

  4. 极速响应Excel数据报表请求的一种方法

    摘要 通过缓存和维护Excel Workbook实例,极速响应Excel数据报表请求. 这是一个真实的大数据"云计算"项目中的解决方案,在给定的时间和资源下,只有这种方法是最简单并 ...

  5. [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...

  6. CentOS用rpm升级glibc

    CentOS用rpm升级glibc #! /bin/sh # update glibc to 2.23 for CentOS 6 wget http://cbs.centos.org/kojifile ...

  7. .vscode folder

    https://stackoverflow.com/questions/32964920/should-i-commit-the-vscode-folder-to-source-control Che ...

  8. js插件---图片裁剪cropImgBox(适合练习编写插件之用)

    js插件---图片裁剪cropImgBox(适合练习编写插件之用) 一.总结 一句话总结:无论是灰度还是高对比度的图片,都是先处理canvas的像素,使其变成灰度或者高对比度,然后再用canvas.t ...

  9. django 笔记2

    默默坚持 :路由系统 URL :视图 request.GET request.POST request.FILES #checkbox等多选的内容 request.POST.getlist() #上传 ...

  10. shrio 身份认证流程-Realm

    身份认证流程 流程如下: 1.首先调用Subject.login(token)进行登录,其会自动委托给Security Manager,调用之前必须通过SecurityUtils. setSecuri ...