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