欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目中导出Excel文件功能的前端代码实现

程序员文章站 2022-06-16 21:29:15
在项目中遇到了两种不同情况, 1、get请求导出文件,实现起来相对简单 直接把要传递的参数拼接在请求地址url后面即可 2、post请求方式 这种方式用于传递参数比较多的情况,在这个项目中所传递参数达到了三四十个。 同时不要忘记在接口加上responseType属性。 ......

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

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'
  });
}