当前位置: 代码网 > it编程>编程语言>Javascript > 原生JS通过XMLHttpRequest请求文件流下载文件时获取文件名称

原生JS通过XMLHttpRequest请求文件流下载文件时获取文件名称

2024年08月03日 Javascript 我要评论
XMLHttpRequest请求文件流获取文件名称

背景:后台请求文件接口返回的是文件流stream,可是不知道怎么获取这个文件流文件的名字;在swagger或者postman中请求接口时,文件名称也是乱码

解决 :

1. 使用xmlhttprequest去请求文件流,并在页面导出

2. 在xmlhttprequest请求的响应结果中需要判断响应是否是希望获得的文件类型

3. 通过查看xmlhttprequest的响应内容时,发现是有文件名称的,可以通过正则等一系列寻找找出来

4. 将流对象创建成下载链接,并将文件名称赋值到download上

5. 模拟点击链接,下载文件,这样下载下来的文件名称也是后台给这个文件命名的名字了

//以导出pdf为例
function downloadfile (id) {
    var xhr = new xmlhttprequest();
    var formdata = new formdata();
    //添加请求文件时的请求参数
    formdata.append('id', id);
    xhr.open("post", '/api/xxx/getfile', true);
    //xhr.setrequestheader('token', localstorage.token);
    xhr.send(formdata);
    xhr.responsetype = "blob";
    xhr.onload = function () {
        if (this.status == 200) {
        var filename = '';
        var blob = this.response;
        var response_type = xhr.response.type;
        if (response_type.indexof('pdf') < 0) {
            var reader = new filereader();
            reader.onload = function (event) {
            var content = event.target.result;
            alert('返回内容不是pdf')
          };
            reader.readastext(blob);
        } else {
            //获取pdf文件名称
            var disposition = decodeuricomponent(xhr.getresponseheader('content-disposition'));
            if (disposition && disposition.indexof('attachment') !== -1) {
            var filenameregex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameregex.exec(disposition);
            if (matches != null && matches[1]) {
            filename = matches[1].replace(/['"]/g, '');
            }
        }

            var downloadelement = document.createelement('a');
            var href = window.url.createobjecturl(blob); //创建下载的链接
            downloadelement.href = href;
            downloadelement.download = filename || 'report'; //下载后文件名
            document.body.appendchild(downloadelement);
            downloadelement.click(); //点击下载
            document.body.removechild(downloadelement); //下载完成移除元素
            window.url.revokeobjecturl(href); //释放掉blob对象
        }
        } else {
            alert('下载失败');
        }
     };
}

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com