前端文件下载接口的调用
背景
日常开发中前端经常会遇到需要下载文件的情况,现针对工作中常用的下载接口调用方法进行梳理。下载接口大体分为两类,直接使用url的get接口,或需要传一些复杂参数的post接口。
GET
当下载接口不需要传复杂参数(如选中需要下载的数据信息),此时直接使用get接口,调用方法为直接打开该url即可:
location.href = `https://xxxx/xx/xx/xx?id=2`;
window.open(`https://xxxx/xx/xx/xx?id=2`);
此方法会打开一个新页面再进行文件下载,若不想打开页面,可以参考以下的post方法进行操作。
POST
POST需要传参,故不能直接使用打开页面的方法,使用方法如下:
// Angular调用接口的方法
public download(params) {
const url = `xxx`;
return this.http.post(url, params, {responseType: 'blob'}); // 需要设置返回体类型
}
// 下载方法
private download(data, response) {
const type = response.headers['content-type']; // 内容类型
const contentDispositon = response.headers['content-disposition']; // 内容形式
const fileName = decodeURI(contentDispositon.split('fileName=')[1] || contentDispositon.split('filename=')[1]); // 获取文件名(此处也可以自定义下载文件名,注意添加后缀)
let blob = new Blob([data], {type: type});
const a = window.document.createElement('a'); // 创建一个a标签
const downloadUrl = window.URL.createObjectURL(blob);
a.href = downloadUrl;
a.download = fileName;
a.click(); // 触发a标签的点击
window.URL.revokeObjectURL(downloadUrl); // 移除URL
}
/**
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL对象表示指定的 File 对象或 Blob 对象。--MDN
*/
以上方法同样适用于get请求类型,此处不再赘述
参考资料
【MDN】
原文地址
【个人博客】