zoukankan      html  css  js  c++  java
  • 前端通过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);

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    新机自动创建yum库
    一段自动添加证书命令
    一段托盘程序
    date
    1234567890 转换成 1,234,567,890
    删除localStorage数组中其中一个元素(根据元素中的属性key)
    xcode6 ios launchimage
    画分割线
    裁剪和打水印
    UITextView添加一个placeholder功能
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11846927.html
Copyright © 2011-2022 走看看