前端文件下载接口的调用

背景

日常开发中前端经常会遇到需要下载文件的情况，现针对工作中常用的下载接口调用方法进行梳理。下载接口大体分为两类，直接使用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】

原文地址

【个人博客】