响应流文件下载和批量下载

最新推荐文章于 2025-03-29 10:02:02 发布

原创

最新推荐文章于 2025-03-29 10:02:02 发布 · 540 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何在项目开发中处理后端以流形式返回的文件下载，包括模仿a链接下载、使用XMLHttpRequest请求流数据并将其转换为Blob类型，以及如何在前端实现文件的动态命名和后缀处理。

文章目录

模仿a链接
使用a链接进行流的下载

项目开发过程中，会有一些文件的下载或者批量下载的功能，当后端响应回来的是以流的形式，该怎么处理呢？？？

模仿a链接

如果模仿a链接进行下载呢？

<a href="url链接" download="下载后文件名称"></a>

<a href="/images/myw3schoolimage.jpg" download="w3logo"></a>

点击超链接后进行下载链接的资源，以及重命名。

使用a链接进行流的下载

流程分为以下几步

准备工作，请求响应流的url和文件下载后的名称。
创建request请求，进行设置头部信息、请求类型和响应类型，并发送请求。
接收到响应，模仿a链接，把响应流转为Blob类型，并转成资源url，赋值给a链接中的href属性，文件的名称赋值给download属性。
模仿点击、移除a链接和释放URL资源。

// 请求地址
var Api = "api接口地址"
// 模拟请求
var xhr = new XMLHttpRequest()
// 文件名称
var fileName = 'a.zip' 
xhr.open('GET', Api, true)
// 头部添加自定义的参数，比如：灰度标识
xhr.setRequestHeader("grayUser", 'true')
// 设置响应类型
xhr.responseType = 'arraybuffer'
// 请求
xhr.send()
// 响应
xhr.onload = function() {
    if (this.status === 200) {
        var type = xhr.getResponseHeader('Content-Type')

        // 二进制流转换bl

最低0.47元/天解锁文章