目前a标签下载文件已经成为主流，并且用户体验较好，因此本人没有对其他下载方式深入研究过。

1.同源url

同源且下载地址就是一个文件时，直接设置a标签的href属性为下载地址，并且为a标签添加download属性即可。如果非同源url，那么这种方式会直接将文件在新的页面打开，而非下载。

2.非同源url

这里介绍三种发送请求的方式和一种不发送请求的方式。以下4种方式都不会打开文件而是直接下载，由于是发送网络请求，因此需要在服务端解决跨域问题才能使用这种方式。以下请求都以axios为例：

2.1利用Blob对象（推荐）

//url是下载地址,fileName是下载时的文件名
function downloadFileBlob(url,fileName){
  axios.get(url, {responseType: 'blob'}).then(res=>{
    console.log(res);
    let url=URL.createObjectURL(res.data);
    console.log(url);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    //download属性可以设置下载到本地时的文件名称,经测试并不需要加文件后缀
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    //释放内存
    URL.revokeObjectURL(url);
  })
}

打印结果：

QQ截图20230525163134.png

2.2利用base64

适用于很小的文件

//url是下载地址,fileName是下载时的文件名
function downloadFile(url,fileName){
  axios.get(url, {responseType: 'blob'}).then(res=>{
    console.log(res);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = URL.createObjectURL(res.data);
    //download属性可以设置下载到本地时的文件名称,经测试并不需要加文件后缀
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  })
}

打印结果：

QQ截图20230525162951.png

2.3利用arraybuffer（不推荐）

其实也是转为base64，只是更麻烦一些，需要根据响应头的content-type属性手动拼接base64字符串。而且btoa也是一个过时的api，因此不推荐使用

function downloadArraybuffer(url,fileName){
  axios.get(url, {responseType: 'arraybuffer'}).then(res=>{
    console.log(res);
    let href='data:'+res.headers['content-type']+';base64,'+window.btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    console.log(href);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = href;
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  })
}

打印结果：

QQ截图20230525164749.png

2.4特殊情况，返回的数据type为application/octet-stream

QQ截图20230525181259.png

这种情况下，直接使用a标签并在url后拼接'?response-content-type=application/octet-stream'字符串就能实现下载。文件名无法修改，content-disposition字段中下发的filename就是文件名。使用2.123的三种方式下载的文件没有后缀。

function downloadFile(url,fileName){
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url+'?response-content-type=application/octet-stream';
  a.download='';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

以上就是我对前端文件下载的总结，可能理解不是很深刻，如有错误欢迎指正

参考文献：
https://blog.csdn.net/love_aya/article/details/115211470
https://blog.csdn.net/weixin_46801282/article/details/123386264