在项目中遇到了两种不同情况,

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文件功能的前端代码实现的更多相关文章

  1. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  2. Vue项目中添加锁屏功能

    0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...

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

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

  4. C#项目中操作Excel文件——使用NPOI库

    转载自:http://blog.csdn.net/dcrmg/article/details/52356236# 感谢-牧野- 实际C#项目中经常会涉及到需要对本地Excel文件进行操作,特别是一些包 ...

  5. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

  6. 如何在 Laravel 项目中处理 Excel 文件

    1.Laravel Excel Laravel Excel 是一款基于PHPExcel开发的Laravel框架专用的Excel/CSV 文件导入导出功能的扩展包,用起来的非常方便.它的Github地址 ...

  7. spring mvc项目中导出excel表格简单实现

    查阅了一些资料,才整理出spring mvc 项目导出excel表格的实现,其实很是简单,小计一下,方便以后查阅,也希望帮助有需要的朋友. 1.导入所需要依赖(Jar包).我使用的是maven,所以坐 ...

  8. 用BCP从SQL Server 数据库中导出Excel文件

    BCP(Bulk Copy Program)是一种简单高效的数据传输方式在SQL Server中,其他数据传输方式还有SSIS和DTS. 这个程序的主要功能是从数据库中查询Job中指定step的执行信 ...

  9. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

随机推荐

  1. MyBatis 接口注解方式代替mapper.xml

    https://blog.csdn.net/m0_38068812/article/details/86566929 spring boot(8)-mybatis三种动态sql  或者 这个 1. 代 ...

  2. xml介绍+xml创建+xml读取

    1.xml介绍:(URL:https://blog.csdn.net/weixin_37861326/article/details/81082144) xml是用来传输内容的,是w3c推荐的 2.使 ...

  3. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  4. 主席树 Couriers

    [bzoj3524/2223][Poi2014]Couriers 2014年4月19日1,2571 Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r ...

  5. linux系列(二十四):du命令

    1.命令格式 du [选项][文件] 2.命令功能 显示每个文件和目录的磁盘使用空间. 3.命令参数 -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文件大小时,以byte为 ...

  6. H-Fashion in Berland

    #include <bits/stdc++.h> using namespace std; int a[1005]; int main() { int n; scanf("%d& ...

  7. 【原创】go语言学习(十六)接口

    目录 接口介绍与定义 空接口和类型断言 指针接收和值接收区别 接口嵌套 接口介绍与定义 1. 接口定义了一个对象的行为规范 A. 只定义规范,不实现B. 具体的对象需要实现规范的细节 2.Go中接口定 ...

  8. codeforces37C

    CF37C Old Berland Language   sol:直接暴力模拟下去,长度加了就补0,凑个数就+1,凑不好就puts(“no”) #include <bits/stdc++.h&g ...

  9. Arts打卡第8周

    Algorithm.主要是为了编程训练和学习. 每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard). 进行编程训练,如果不训练你看再多的算法书,你依然不 ...

  10. cgdb UTF-8乱码

    support utf-8 cgdb github上的issues里面有人提到了这个问题,维护者回复的是需要使用libncursesw这个支持宽字符的库来解决这个问题. 查看是否安装了该库ldconf ...