原生JS通过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('下载失败');
        }
     };
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用原生 JavaScript 实现文件上传,以下是一个基本的示例: HTML 代码: ```html <input type="file" id="file-upload" /> <button onclick="uploadFile()">上传文件</button> ``` JavaScript 代码: ```javascript function uploadFile() { var input = document.getElementById('file-upload'); var file = input.files[0]; var formData = new FormData(); formData.append('file', file); var request = new XMLHttpRequest(); request.open('POST', 'your-upload-url', true); request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE && request.status === 200) { // 文件上传成功的处理逻辑 console.log(request.responseText); } }; request.send(formData); } ``` 上述代码中,我们首先获取文件上传表单元素和文件对象。然后,创建一个 FormData 对象,并将文件对象添加到其中。接下来,创建一个 XMLHttpRequest 对象,并使用 `open` 方法指定上传的 URL、请求方式等参数。 在 `onreadystatechange` 事件中,我们检查请求的状态是否为完成状态(`XMLHttpRequest.DONE`)且响应状态码是否为 200(表示成功)。如果满足条件,表示文件上传成功,可以在这里处理成功的逻辑。 最后,通过调用 `send` 方法发送请求,将文件上传到指定的 URL。请将 `'your-upload-url'` 替换为实际的上传地址。 注意:由于涉及到跨域请求,请确保上传地址的配置允许跨域请求。另外,此代码示例基于原生 JavaScript 实现,没有使用任何框架或库。如果你使用的是某个特定的框架或库,可能会有相应的上传方法或插件可用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值