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

最新推荐文章于 2024-06-04 17:42:21 发布

平山CP3

最新推荐文章于 2024-06-04 17:42:21 发布

阅读量1k

点赞数 2

分类专栏： JS脚本文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_33277597/article/details/137688882

版权

JS脚本专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了如何在后台请求文件流接口时获取文件名，通过XMLHttpRequest发送POST请求，解析Content-Disposition头信息获取文件名，最后创建下载链接并模拟点击下载文件，确保下载的文件名正确。

摘要由CSDN通过智能技术生成

背景：后台请求文件接口返回的是文件流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('下载失败');
        }
     };
}