标签下载

一、同源 URL 下载

---

function download(url,name){
    const a = document.createElement("a");

    a.setAttribute("href",url);
    a.setAttribute("target","_blank");
    a.setAttribute("download",name);

    document.body.appendChild(a);

    a.click();
    a.remove();
}

二、跨域 URL 下载

---

a 标签的 download 属性具有一定的限制，仅适用于同源 URL 。如果是跨域 URL ， 那么 a 标签的下载行为变成了另起 Tab 打开文件了。所以，我们需要将跨域 URL 转换成 blob 的形式才可以下载。

async function transformBlobByUrl(url){
    const response = await fetch(url);
    const blob = await response.blob();
    return URL.createObjectURL(blob);
}

async function download(url,name){
    const link = document.createElement("a");
    const blob = await transformBlobByUrl(url);
    link.href = URL.createObjectURL(blob);
    link.download = name;
    link.click();
    link.remove();
    URL.revokeObjectURL(link.href);
}

三、https & http 下载

---

如果在 https 环境下，通过 a 标签下载 URL 地址为 http 的文件，会出现拦截或者闪一下的情况。浏览器会认为在 https 下打开的 http 链接不是人为的，所以会进行拦截，或者访问不成功。 所以，我们需要将把目标链接改成 https 的，不管前端还是后端

function httpToHttps(url){
    const httpReg = /^http(\:\/\/.*)/;
    return url.replace(httpReg,"https$1");
}

function download(url,name){
    const a = document.createElement("a");
    const urlCopy = httpToHttps(url);


    a.setAttribute("href",urlCopy);
    a.setAttribute("target","_blank");
    a.setAttribute("download",name);

    document.body.appendChild(a);

    a.click();
    a.remove();
}