简单的聊一聊如何使用标签下载文件

前言

最近和后端联调下载时忽然发现屡试不爽的 标签下载失灵了？这才感觉自己对文件下载一直处在一知半解的模糊状态中，趁端午前夕有空赶紧总结了一下，和大家一起讨论讨论。

标签 download

这应该是最常见，最受广大人民群众喜闻乐见的一种下载方式了，搭配上 download 属性， 就能让浏览器将链接的 URL 视为下载资源，而不是导航到该资源。

如果 download 再指定个 filename ，那么就可以在下载文件时，将其作为预填充的文件名。不过名字中的 / 和 `` 会被转化为下划线 _，而且文件系统可能会阻止文件名中的一些字符，因此浏览器会在必要时适当调整文件名。

封装下载方法

贴份儿我常用的下载方法：

ts
复制代码
const downloadByUrl = (url: string, filename: string) => {
    if (!url) throw new Error('当前没有下载链接');
 
    const a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
    a.download = filename;
    // 使用target="_blank"时，添加rel="noopener noreferrer" 堵住钓鱼安全漏洞 防止新页面window指向之前的页面
    a.rel = "noopener noreferrer";
    document.body.append(a);
    a.click();
 
    setTimeout(() => {
        a.remove();
    }, 1000);
};

Firefox 不能一次点击多次下载

这里有个兼容性问题：在火狐浏览器中，当一个按钮同时下载多个文件（调用多次）时，只能下载第一个文件。所以，我们可以利用 标签的 target 属性，将其设置成 _blank 让火狐在一个新标签页中继续下载。

ts
复制代码
// 检查浏览器型号和版本
const useBrowser = () => {
    const ua = navigator.userAgent.toLowerCase();
    const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
    const m = ua.match(re);
    const Sys = {
        browser: m[1].replace(/version/, "'safari"),
        version: m[2]
    };
 
    return Sys;
};

添加一个浏览器判断：

ts
复制代码
const downloadByUrl = (url: string, filename: string) => {
    // 略......
 
    //  火狐兼容
    if (useBrowser().browser === "firefox") {
        a.target = "_blank";
    }
 
    document.body.append(a);
}

download 使用注意点

标签虽好，但还有一些值得注意的点：

1. 同源 URL 的限制

download 只在同源 URL 或 blob: 、 data: 协议起作用

也就是说跨域是下载不了的......

首先，非同源 URL 会进行导航操作。其次，如果非要下载，那么正如上面的文档所说，可以先将其转换为 blob: 或 data: 再进行下载，至于如何转换会在 Blob 章节中详细介绍。

2. 无法鉴权

使用 标签下载是带不了 Header 的，因此也不能携带登录态，所以无法进行鉴权。这里我们给出一个解决方案：

1. 先发送请求获取 blob 文件流，这样就能在请求时进行鉴权；

2. 鉴权通过后再执行下载操作。

这样是不是就能很好的同时解决问题1和问题2带来的两个痛点了呢