下载方式

1. 通过a标签的download属性

1
<a download href="/文件名称.xls">下载文件</a>

优点：使用简单、文件名称就是后台设置的名称(也可以通过download设置名称)
缺点：只可以同域下载

2. 通过设置iframe标签的src来发起资源请求

1
2
3
4
5
6
7
8
9
10
11
12
var iframe = ''
function download() {
  if (!iframe) {
    iframe = $('<iframe id="iframeDownload" style="display: none"></iframe>');
    $('body').append(iframe);
    iframe.on('load', function () {
      console.log('文件下载失败');
    });
  }
  iframe.attr('src', `文件名称.xls`);
}
</script>

优点：兼容性较好、文件名称就是后台设置的名称
缺点：文件生成失败了可以提示，但是拿不到后端提示信息，safari文件名称错误

3. ajax请求返回后通过

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fetch(uri, {
      method: 'get',
      credentials: 'include'
    })
    .then(async res => {
      if (res.headers.get('content-type').startsWith('application/octet-stream')) {
        const blob = await res.blob();
        const a = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = '文件名称';
        a.click();
        window.URL.revokeObjectURL(url);
      } else {
        const response = await res.json();
        return response
      }
    });

优点：支持post请求、如果文件生成失败后端可返回json以便做后面的逻辑
缺点：后端的文件名称不好获取