原生js发送网络请求获取文件流下载#原生JS #POST #文件下载

原生js发送网络请求获取文件流下载#原生JS #POST #文件下载

1.前提

因项目需要下载文件，但是get请求下载虽然简单（直接window.open(请求URL)就好了），但是缺点也很明显，携带的参数有限，容易出现URL长度过长问题，所以需要POST请求去下载后端返回的文件流

2.主要用到的知识点有： XMLHttpRequest，Blob ，window.URL //这些知识点可以通过 学习 Web 开发 | MDN (mozilla.org)去学习让自己更好的掌握理解这个功能

3.代码：

let data = {
    userId: "1234",
    age: 18
}//参数
let xhr = new XMLHttpRequest();
xhr.open("POST", url, true) //url是请求接口地址
xhr.responseType = "blob"//确定响应类型为blob
xhr.setRequestHeader("Content-Type", "application/json"); //确定传参类型 详情可见https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
xhr.send(JSON.stringify(data))//绑定传参
xhr.addEventListener("load", function () {//请求后的回调
    if (xhr.status === 200) {//成功的回调
        let blob = new Blob([xhr.response], { type: "application/zip" })//接收到的blob数据创建为一个Blob对象，并指定其MIME类型为application/zip。如果不是zip类型文件可修改别的文件类型详情看https://www.iana.org/assignments/media-types/media-types.xhtml
        let url = window.URL.createObjectURL(blob) //利用window.URL.createObjectURL()方法生成一个URL，使得Blob对象可以被下载
        let a = document.createElement("a")//创建一个a标签元素``，
        const filename = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1] //文件名为获取到的文件名
        a.href = url //设置其下载链接为上一步生成的URL
        a.download = filename //绑定文件名
        document.body.append(a) // 将这个a标签添加到页面
        a.click() //模拟用户点击下载链接
        window.URL.revokeObjectURL(url) // 最后撤销生成的URL，释放资源
    } else {
        console.log("请求失败");
    }
})

4. 备注，我这只示例了application/json post请求以JSON的方式穿给后端，还有很多其他方式，不知道的同学可以通过百度POST请求各种传参方式或者联系我，希望能帮助到你。