使用a标签下载文件

说明

使用a标签下载文件，并可以设置下载文件的名称。存在一个问题，a标签下载非同源的文件时，好像不能设置下载文件的文件名称。

需求

用户上传一个或多个文件到服务器，服务器压缩处理后返回一个压缩包，压缩包存在于资源服务器，然后用户可以下载这个压缩包，但是下载文件会有一个默认名称，我们要做的就是修改这个默认名称为产品给出的任意名称。

解决方案

使用ajax下载资源，设置responseType为blob，获取到文件的blob，然后再使用a标签下载blob，即可设置文件名称。

function downloadHref(name, src) {
    const $a = document.createElement('a');
    $a.setAttribute('href', src);
    // 重命名，去掉版本号，解决safari浏览器文件格式为dms的问题
    $a.setAttribute('download', name);
    document.documentElement.appendChild($a);
    $a.click();
    document.documentElement.removeChild($a);
}

function getBlobFile(src) {
    return new Promise(resole => {
        const xhr = new window.XMLHttpRequest();
        xhr.open('GET', src, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            const url = window.URL.createObjectURL(xhr.response);
            resole(url);
        };
        xhr.send();
    })
}

const src = '//tmp.s90i.aaadns.com/2338/0/AFoIohIQTxgBII3BvZAGKMC1zZIG?f=%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87_1645174925.zip&v=1645174925';

setTimeout(async () => {
    const blob = await getBlobFile(src);
    downloadHref('夏季特惠.zip', blob)
}, 2000);