前端GET/POST请求下载文件多种方式

miao_0923 2024-06-21 15:03:01 阅读 94

下载post

export const download = (data, projectId) => { return request({ url: BaseUrl + '/xxx/xxx/xxx', headers: { "Project-Id": projectId, httpWhite: true, }, responseType: "blob",//文件流 method: 'post', data })}

<el-button size="small" type="primary" class="downLoadTemplate" @click="downloadFile(row)"> <i class="iconfont yun-xiazai"></i> <span class="first">下载数据模板</span></el-button>//点击下载const downloadFile(row){ const params = { 需要传递的参数:'xxxx', id:row.id, //示例, } download(params, this.projectIds).then((res) => { if (res.status === 200) { this.downloadDataTemplate(res); } });}//下载数据模板downloadDataTemplate(res) { if (!res.data) { return; } const fileName = decodeURIComponent( res.headers["content-disposition"].split("filename=")[1] ); const blob = new Blob([res.data], { type: "application/vnd.openxmlformats- officedocument.spreadsheetml.sheet;charset=utf-8", }); const downloadElement = document.createElement("a"); const href = window.URL.createObjectURL(blob); // 创建下载的链接 downloadElement.href = href; // 文件名中有中文 则对文件名进行转码 downloadElement.download = fileName; // 下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); // 点击下载 document.body.removeChild(downloadElement); // 下载完成移除元素 window.URL.revokeObjectURL(href); // 释放blob对象},


Get下载方法

通用get下载方法 99%可以使用

const downError = `BaseUrl+/xxx/xxx/xxxx?${this.tokenHeader}=${getToken()}&projectId=${this.projectId}&spaceId=${this.spaceId}`;window.open(downError, "_self");//调用window方法

特殊get下载方法 1%才能用到 一般用不到 (仅用于个人记录)

这种使用于需要在hearder里面添加projecrt-Id等参数 一般的都不需要 主要看后端接口能不能使用

使用下面这种方法 最主要get下载的请求 是responseType:blob 文件流

export const exportPersonnel = (params) => request({ url: BaseUrl + '/exportxxx/xxxx', headers: { "Project-Id": params.projectId, }, method: 'get', responseType: 'blob',//文件流方法 params,})

// 导出exportcustomer() { let downStr = { ...this.params }; exportPersonnel(downStr).then((r) => { if (r.status === 200) { //获取下载文件名 const fileName = decodeURIComponent( r.headers["content-disposition"].split("filename=")[1] ); // 创建 a 元素 const link = document.createElement('a'); const href = window.URL.createObjectURL(r.data)//创建下载链接 link.href = href;// 设置下载链接的 URL link.style.display = "none"; link.download = fileName; // 下载后文件名 document.body.appendChild(link); link.click(); // 点击下载 document.body.removeChild(link); // 下载完成移除元素 window.URL.revokeObjectURL(href); // 释放blob对象 } });},



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。