前端文件下载方式

常用方式

• window转跳方式
• 隐藏iframe调整url方式
• a标签
• 第三方库，download.js ,etc.

1. window转跳

window转跳方式分两种：

• window.open(url)
• window.location.assign(url)

2. 隐藏iframe调整url方式

<!-- html部分 -->
<iframe id="my_iframe" style="display:none;"></iframe>

// js部分
document.getElementById('my_iframe').src = res.data;

3. a标签

可分为两种实现方式：

• 直接使用
• 间接使用 - js创建临时标签点击

3.1 直接使用

<a href="http://xxx.jpg" download>

浏览器支持直接预览部分文件类型，如：.pdf;.png;.jpg 等

download 属性可以阻止浏览器预览文件，进行直接下载

注意： download属性只能在js同源地址的情况下才能生效

3.2 间接使用

let a = document.createElement('a');
a.style = 'display: none';
a.href = link;
a.download = filename;
document.body.appendChild(a);
a.click(); 
document.body.removeChild(a);

对于浏览器可以直接预览的文件类型

可使用blob对象进行转换, 如下:

window.URL.createObjectURL(new Blob([link]))

要注意，href为createObjectUrl(blob)方式的话，必须声明download；否则文件无法下载，页面展示link原始路径的文本内容

4. 第三方库

第三方封装的lib，需按照对应文档使用

对比

下载方式	优点	缺点
window转跳	实现简单	对于浏览器默认可预览的类型无法处理自动下载
iframe方式	实现简单	同上
a标签	实现简单，浏览器默认预览类型可新建Blob对象进行下载
第三方包	使用简单，适用于各种情况	需要在项目中引用额外插件，具体实现方式需查看源码

总结

推荐使用a标签下载方式，如果对引用第三方插件没要求也可直接使用lib