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

2019-08-14 10:24:52来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 


原文链接:https://www.cnblogs.com/thinkguo/p/11281919.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Promise 学习心得

下一篇:小程序实现语音识别转文字,坑路历程