前端通过url下载文件方法

Posted 2020-11-29 huchong-bk

前端通过url下载文件方法

产生背景

• 浏览器通过url下载文件，当浏览器识别出资深能播放的资源文件，就不会走下载流程，会直接打开
• 解决方法
• 1.让后台转成请求的方式，输出文件流（如果想实现批量下载-因为浏览器会误判多文件下载是个攻击，可新建iframe通过src实现批量下载）
• 2.a标签， h5的download，仅仅限制当前域名下的文件下载，不同域名之下的，不会走下载，会直接打开浏览器能自动识别的资源文件
• 3.通过下面前端看似狗屎的代码解决

// 保存到本地并自动点击
function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘);
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
}
// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\/g, ‘/‘);
    const xhr = new XMLHttpRequest();
    xhr.open(‘GET‘, url2, true);
    xhr.responseType = ‘blob‘;
    //xhr.setRequestHeader(‘Authorization‘, ‘Basic a2VybWl0Omtlcm1pdA==‘);
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}
downloadUrlFile(url, fileName);