前端通过url下载文件方法

Posted huchong-bk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端通过url下载文件方法相关的知识,希望对你有一定的参考价值。

前端通过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下载文件方法的主要内容,如果未能解决你的问题,请参考以下文章

前端通过ajax获取base64转blob下载PDF方法

前端实现文件下载为什么不能用AJAX

根据图片的url地址下载图片到本地保存代码片段

ajax方式下载文件

前端面试题之手写promise

php如何通过URL批量下载图片,这些图片是设计作品,