Vue 导出表格为Excel
放法有多种,我这里是直接转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的更多相关文章
- qt技巧--使用html导出表格替代excel
曾经为qt不能直接导出excel而困扰,后来经过深入了解,得知qt支持xml国际语言,html是xml的一种.html是做网页的,相信大家比较熟悉.所以使用html的<table ...
- 【js】js导出表格到excel
js: function method(tableid) //读取表格中每个单元到EXCEL中 { var curTbl = document.getElementById(tableid); var ...
- vue 导出流文件excel
第一种方法:需要设置响应类型,这里还需要安装 npm install js-file-download --save ,然后引用 var fileDownload = require('js-file ...
- vue将表格导出为excel
vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- vue中使用导出表格功能
1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...
- vue+element 使用Export2Excel导出表格组件
下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...
- vue 导出excel后端返回乱码下载不了的解析问题
有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码 this.download('后端给的导出excel的方法', { ...this.queryParams }, ` ...
随机推荐
- laravel5.0 自定义服务类
一.创建加密服务类 在 app\services 目录下创建 Encrypt.php <?php namespace App\Services; class Encrypt { } 二.注册服务 ...
- 移动和PC的适配
<script> //mode 移动端的适配方式 按需 传参 目前只有两种 px和rem (function(win, doc, mode) { var std = 750; if(/(i ...
- NET Core微服务之路:实战SkyWalking+Exceptionless体验生产下追踪系统
原文:NET Core微服务之路:实战SkyWalking+Exceptionless体验生产下追踪系统 前言 当一个APM或一个日志中心实际部署在生产环境中时,是有点力不从心的. 比如如下场景分析的 ...
- CodeForces 363B Fence
Fence Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Original ...
- ArcGIS api for javascript——用图表显示查询结果
描述 本例展示了如何使用查询任务结果用去Google Chart API构建一个图表.当运行本例,点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表. 函数init创建了一 ...
- python的开发工具UliPad安装篇
之前文章里写过一个搭建windows下搭建Selenium+Eclipse+Python环境,如今认为这个Eclipse太大了,太笨重了,重新启动又慢,像Python脚本轻级语言,不是必需用那么大的工 ...
- UMeditor百度富文本编辑器的使用
批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js 然后搜索 img.set 替换下就好了 var url=list[i].url ; ...
- BZOJ5106: [CodePlus2017]汀博尔
[传送门:BZOJ5106] 简要题意: 给出n棵树,初始高度为h[i],每棵树每个月长高a[i] 现有一个客户,需要至少s长的总木材,而且每次截取的木材必须是一整颗树而且高度大于等于L 求出最少的月 ...
- Lesson 1 Basic Concepts: Part 1
www.how-to-build-websites.com/basic-concepts/part1.php An introduction to domain names, web servers, ...
- flowable一个简单的例子
holiday-request.bpmn20.xml: <?xml version="1.0" encoding="UTF-8"?> <def ...