vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖
进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入:
npm install -S file-saver xlsx
npm install -D script-loader
添加js文件
下载所需的两个文件:Blob.js、Export2Excel.js
新建vendor,名称不一定非是vendor,建议但不非得将此目录放在与单页面同级的目录。将上面两个js文件放在vendor目录中。
比如:
这里要使用的单页面是merchantBIllFlow.vue,所以在此同级目录下新建vendor目录,将上面两个js文件放在此目录下。
修改配置文件
在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的
resolve的alias中加入:
'vendor':path.resolve(__dirname,'../src/views/account/vendor'),
具体路径根据实际而写,这里是按照我的方式写的路径。
如下:
实现代码
点击导出按钮
导出账单
实现查询方法
在methods中
//报表导出前的查询
exportClick(){
this.loading = true;//缓冲条加载
//此代码实现向后台异步请求数据
exportMerchantBill(this.billForm).then(response => {
this.loading = false;
const data = response.data;//声明常量data用来接收后台返回的数据data
this.exportList = data;//将接受到的data数据赋给exportList这个列表,用于当作导出Excel的数据源
//开始执行导出方法,此方法要放在括号里面,因为是异步请求数据,请求完才能执行导出
this.export2Excel()
}).catch(error => {
debugger;
this.loading = false
console.log(error)
})
},
执行以上代码要在data中添加exportList[]:
data(){
return{
//要导出的报表的list
exportList:[],
}
}
说明:
以上代码用来请求后台来获取一个要显示内容的list,但是为了快速实现效果,可以自己声明一个list,如下
导出Excel代码
继上面执行查询数据后,开始执行导出Excel的方法: this.export2Excel()
在methods中新建方法:
继上面请求后台数据的版本
methods: {
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel');
const tHeader =
['账单名称', '订单编号', '交易编号','交易类型',
'交易方式','交易金额','交易前金额', '交易后金额'
];
const filterVal =
['transactionName', 'orderNum','transactionNum','transactionTypeName',
'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',
];
const list = this.exportList;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '**报表'+moment(new Date()).format('YYYYMMDDHHmmss'));
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
简单的版本
methods: {
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel');
const tHeader =
[
'编号', '标题', '作者','回顾', '时间'
];
const filterVal =
['id', 'title','author','pageviews','display_time'];
const list =
[
{id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
{id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
{id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
];
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '**账单报表'+moment(new Date()).format('YYYYMMDDHHmmss'));
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
说明:
1.const tHeader:这是excel表中要显示的标题头,即最上面那一行,这是根据具体业务需求设置的。
2.const filterVal :这是excel下面对应标题头要显示的具体内容,要与list中的相对应,比如简单版本中与id、title等对应。
如果是请求后台返回一个实体类的list,那么这个要与实体类的属性相对应。
3. export_json_to_excel(tHeader, data, '**账单报表'+moment(new Date()).format('YYYYMMDDHHmmss'))如果要修改导出报表的名字,就将
**账单报表修改成自己需要的,后面的是要实现时间戳,通过moment来将当前时间进行格式化为时间字符串,防止导出时重名。
4.关于导出的Excel具体显示的内容,就是要给它传递一个list,不管是自己手动编写list,还是请求后台返回的list。只需要修改
‘const list = ’这个后面的内容给list 赋值即可。通过修改还可以将Element ui中的表格中data属性所对应list进行导出,从而实现将表格导出为Excel的操作。
但是这样只能导出一页的数据,所以要重新编写请求后台的接口。来返回一个list用于前端导出Excel。
效果
http://www.pianshen.com/article/613969950/
vue导出excel加一个进度条_Vue实现在前端导出Excel相关推荐
- vue导出excel加一个进度条_vue 实现excel导出功能
最近Vue项目中用到了导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 我是使用vue-cli3.0的框架,所以在安装过程中没有遇到 ...
- vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
- vue导出excel加一个进度条_vue 实现Excel 导入导出功能
第一步:安装依赖 使用npm: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 或使用yarn: ya ...
- vue导出excel加一个进度条_vue项目中如何把数据导出成excel文件
Loading... 关于vue中如何把数据导出成excel文件 ### 1. 安装依赖 ``` yarn add file-saver yarn add xlsx yarn add script-l ...
- vue导出excel加一个进度条_vue纯前端导出excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
- vue导出excel加一个进度条_运用vue导出excel碰到的那些坑
需求: Vue+element UI el-table下的导出当前一切数据到一个excel文件里. 先根据网上的要领,看看有哪些坑 准备工作: 1.装置依靠:yarn add xlsx file-sa ...
- vue导出excel加一个进度条_使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- bootstraptable treeGrid 懒加载_为 Vue 的惰性加载加一个进度条
简介 通常用 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载.在处理大文件时,这可能会导致用户体验不佳. 借助 Webpack,可以 ...
最新文章
- 【matlab代码】生成特定频率的正弦信号,X轴以时间表示
- 7年Java后端被淘汰,一路北漂辛酸史。。。
- python函数里面引用外部变量_Python基础 变量进阶
- 开源开放 | 开源网络通信行业知识图谱(新华三)
- python 打开pdf文件_Python3检验pdf文件是否有效
- 利用SVN的post-commit钩子实现多项目自动同步
- Java 中的异常处理
- VNPY价差交易模块
- Java彻底 - WEB容器的侦听具体解释 ServletContextListener
- python模板代码替换_Python - 安全替换字符串模板(safe_substitute) 详细解释
- java发送qq邮件_「java发邮件」Java 通过SMTP实现发送QQ邮件 - seo实验室
- 下载安装php详细教程(在安装配置apache之后)
- Promise(微任务)- 让你看完就懂
- 快手7亿用户增长实践
- java版溺尸掉三叉戟吗_我的世界1.13通用水鬼塔经验农场(刷三叉戟农场)【内有存档】...
- SpringBoot根据模板生成Word文件,然后Word转PDF
- Linux上的中文输入法安装(Ubuntu + Kali五笔拼音)
- 大数据技术,Spark核心技术之运行原理
- 中级宏观经济学-笔记
- 写给初学者:电气制图规范和图纸识读方法——第二期