vue项目中导出Excel文件功能的前端代码实现
在项目中遇到了两种不同情况,
1、get请求导出文件,实现起来相对简单
// 导出数据
exportData() {
window.location.href = `/oes-content-manage/role/export-roles?size=${this.totalCount}&sidx=roleName&sord=desc&roleId=${this.searchForm.roleId}`;
},
直接把要传递的参数拼接在请求地址url后面即可
2、post请求方式
// 查询结果导出
exportResult() {
let key;
let param = {};
for (key in this.exportParam) {
if (key == 'page' || key == 'rows') {
continue;
} else {
param[key] = this.exportParam[key]
}
}
exportexcl(param).then(res => {
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); // 创建下载的链接
downloadElement.href = href;
downloadElement.download = '导出数据.xlsx'; // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); // 点击下载
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
})
},
这种方式用于传递参数比较多的情况,在这个项目中所传递参数达到了三四十个。
同时不要忘记在接口加上responseType属性。
// 查询结果导出
export function exportexcl(params) {
return axios.post(servers + '/program/export', params, {
responseType: 'blob'
});
}
vue项目中导出Excel文件功能的前端代码实现的更多相关文章
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- C#项目中操作Excel文件——使用NPOI库
转载自:http://blog.csdn.net/dcrmg/article/details/52356236# 感谢-牧野- 实际C#项目中经常会涉及到需要对本地Excel文件进行操作,特别是一些包 ...
- vue项目中导出PDF的两种方式
参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...
- 如何在 Laravel 项目中处理 Excel 文件
1.Laravel Excel Laravel Excel 是一款基于PHPExcel开发的Laravel框架专用的Excel/CSV 文件导入导出功能的扩展包,用起来的非常方便.它的Github地址 ...
- spring mvc项目中导出excel表格简单实现
查阅了一些资料,才整理出spring mvc 项目导出excel表格的实现,其实很是简单,小计一下,方便以后查阅,也希望帮助有需要的朋友. 1.导入所需要依赖(Jar包).我使用的是maven,所以坐 ...
- 用BCP从SQL Server 数据库中导出Excel文件
BCP(Bulk Copy Program)是一种简单高效的数据传输方式在SQL Server中,其他数据传输方式还有SSIS和DTS. 这个程序的主要功能是从数据库中查询Job中指定step的执行信 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
随机推荐
- [Luogu] 教主的魔法
https://www.luogu.org/problemnew/show/P2801 分块 对于每一块进行排序存储在另一个数组中 二分查询 #include<iostream> #inc ...
- Cogs 2221. [SDOI2016 Round1] 数字配对(二分图)
[SDOI2016 Round1] 数字配对 ★★★ 输入文件:menci_pair.in 输出文件:menci_pair.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 有 ...
- 搭建自己的博客(七):使用bootstrap框架美化导航栏
前面发现自己写css代码以及很多功能太麻烦,故希望在自己的博客中引入bootstrap框架,bootstrap是一个非常强大的前端框架,简单易学容易上手.附上官网地址:bootstrap官网 我使用的 ...
- Firefox 英文改中文
小书匠kindle 在Linux上安装好Firefox后,想进设置界面个性化一下,想看看浏览历史,无奈Linux上默认的Firefox是英文设置界面的,对于我种强迫症不能忍. 刚开始还在设置界面下搜索 ...
- mysql5.7版本以上下载安装
1.mysql官网下载地址:https://downloads.mysql.com/archives/community/ 2.下载完成后解压,解压后如图: 3.放置位置,把解压好的文件夹放在自己喜欢 ...
- 常见的HTTP方法有哪些?
GET:请求指定的页面信息,返回实体主体: HEAD:类似于get请求,只不过返回的响应中没有具体的内容,用于捕获报头: POST:向指定资源提交数据进行处理请求(比如表单提交或者上传文件),.数据被 ...
- HDU 6041 I Curse Myself ——(仙人掌图,tarjan,转化)
题解见这个博客:http://blog.csdn.net/ME495/article/details/76165039. 复杂度不太会算..这个经典问题的解法需要注意,维护队列里面只有k个元素即可.另 ...
- java继承内存分配
java继承内存分配 继承的基本概念: * Java不支持多继承,也就是说子类至多只能有一个父类. * 子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法. * 子类中定义的成员 ...
- EXCEL公式中如何表示回车符?
问题: 将 id credttm cdno cdamt cashbrid cashrole note 转换为 "id credttm cdno cdamt cashbrid ca ...
- Leetcode题 257. Binary Tree Paths
Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...