前端通过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);

秒客网

前端通过url下载文件方法

相关文章