前段使用get获取文件流,实现下载

前提:接口的返回是一个文件流

1.接口不需要加token

function downLoad() {

        const iframe = document.createElement('iframe')

        iframe.style.display = 'none'
        iframe.style.height = 0
        iframe.src = url + 参数
  /*  动态创建iframe,并且放入页面当中,不显示在页面当中  */
        document.body.append(iframe)
        setTimeout(()=>{
    /*  延时两秒将新创建的iframe标签去掉,防止影响下次下载  */
            iframe.remove()
        }, 2000)

}

2.接口需要添加token

function downLoad() {

  var url =  ''  //接口请求的完整地址
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        };  
        xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口
        xhr.setRequestHeader('AuthToken', '需要传的token')
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.responseType = "blob";    // 返回类型blob
        xhr.send(null)
        da.comp.loadding.show();
        // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
        xhr.onload = function () {
            // 请求完成
            var name = xhr.getResponseHeader('Content-disposition').split('=');
            if (this.status === 200) {
                // 返回200
                da.comp.loadding.hide();
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
                reader.onload = function (e) {
                    // 转换完成,创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = decodeURI(name[name.length-1]);// name[name.length-1];
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }
        };

}

posted @   活在当下_yzx  阅读(578)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· Windows编程----内核对象竟然如此简单?
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示