前端下载文件的几种方式

前言

总结下载文件的几种方式，文件都是通过接口获取的，前端通过调用接口将接口返回的文件下载。
文件下载的方式的选择主要考虑以下几个方面：
1. 接口使用的是post请求还是get请求
2. 接口返回的是文件流还是下载的文件路由
3. 是否打开新窗口
主要是想记录一些我在实际有用到过的一些方式，欢迎补充交流

1. window.open

适用于get请求

window.open(url)

2. window.location.href

适用于get请求

window.location.href = url;

3. a标签

适用于get请求

/**
*  通过 a标签下载文件
* @param url 文件的链接
*/
export function use_a_download(url) {
 const link = document.createElement('a');
 document.body.appendChild($a);
 link.href = url;
 link.download = 'download';
 link.click();
 setTimeout(() => {
   if (link.remove) {
     link.remove();
   } else if (link.removeNode) {
     link.removeNode();
   }
 }, 20000);
}

存在的问题：
	1. 浏览器会直接打开图片类型和txt类型的文件而不是下载
	2. 跨域时，download属性失效，无法对下载的文件重命名，默认为访问路径的名字。

4. iframe

  /**
 * 通过 iframe 下载文件
 * @param url 文件的链接
 */
export function use_iframe_download(url) {
  const $iframe = document.createElement('iframe');
  $iframe.style.height = '0px';
  $iframe.style.width = '0px';
  document.body.appendChild($iframe);
  $iframe.setAttribute('src', url);
  setTimeout(() => {
    if ($iframe.remove) {
      $iframe.remove();
    } else if ($iframe.removeNode) {
      $iframe.removeNode();
    }
  }, 20000);
}

5. blob

适用于get/post请求,可以传参

/**
* post请求导出列表
* @param url 访问路由
* @param data 接口参数，数组
* @param fileName 导出文件名
* @param formatStr 日期格式化
* @param method 请求类型
*/
export function use_blob_download(url, data, fileName, formatStr,method = 'post') {
axios({
  method,
  url,
  data,
  responseType: 'blob'
}).then(res => {
  const link = document.createElement('a');
  let blob = new Blob([res.data]);
  link.style.display = 'none';
  link.href = URL.createObjectURL(blob);
  link.setAttribute('download', fileName + new Date().format(formatStr) + '.xls');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});
}

存在的问题：跨域