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

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. [Luogu] 教主的魔法

    https://www.luogu.org/problemnew/show/P2801 分块 对于每一块进行排序存储在另一个数组中 二分查询 #include<iostream> #inc ...

  2. Cogs 2221. [SDOI2016 Round1] 数字配对(二分图)

    [SDOI2016 Round1] 数字配对 ★★★ 输入文件:menci_pair.in 输出文件:menci_pair.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 有 ...

  3. 搭建自己的博客(七):使用bootstrap框架美化导航栏

    前面发现自己写css代码以及很多功能太麻烦,故希望在自己的博客中引入bootstrap框架,bootstrap是一个非常强大的前端框架,简单易学容易上手.附上官网地址:bootstrap官网 我使用的 ...

  4. Firefox 英文改中文

    小书匠kindle 在Linux上安装好Firefox后,想进设置界面个性化一下,想看看浏览历史,无奈Linux上默认的Firefox是英文设置界面的,对于我种强迫症不能忍. 刚开始还在设置界面下搜索 ...

  5. mysql5.7版本以上下载安装

    1.mysql官网下载地址:https://downloads.mysql.com/archives/community/ 2.下载完成后解压,解压后如图: 3.放置位置,把解压好的文件夹放在自己喜欢 ...

  6. 常见的HTTP方法有哪些?

    GET:请求指定的页面信息,返回实体主体: HEAD:类似于get请求,只不过返回的响应中没有具体的内容,用于捕获报头: POST:向指定资源提交数据进行处理请求(比如表单提交或者上传文件),.数据被 ...

  7. HDU 6041 I Curse Myself ——(仙人掌图,tarjan,转化)

    题解见这个博客:http://blog.csdn.net/ME495/article/details/76165039. 复杂度不太会算..这个经典问题的解法需要注意,维护队列里面只有k个元素即可.另 ...

  8. java继承内存分配

    java继承内存分配 继承的基本概念: * Java不支持多继承,也就是说子类至多只能有一个父类. * 子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法. * 子类中定义的成员 ...

  9. EXCEL公式中如何表示回车符?

    问题: 将 id credttm cdno cdamt cashbrid cashrole note 转换为 "id  credttm  cdno   cdamt  cashbrid  ca ...

  10. Leetcode题 257. Binary Tree Paths

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...