码迷,mamicode.com
首页 > Web开发 > 详细

前端通过url下载文件方法

时间:2019-11-13 10:30:52      阅读:1006      评论:0      收藏:0      [点我收藏+]

标签:header   iframe   资源文件   create   replace   大文件   status   port   class   

前端通过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下载文件方法

标签:header   iframe   资源文件   create   replace   大文件   status   port   class   

原文地址:https://www.cnblogs.com/huchong-bk/p/11846927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!