【无标题】

前端get和post请求下载文件

前端get和post请求下载文件

get（示例）：

		var url = 请求;
        var xhr = new XMLHttpRequest();		//定义http请求对象
        xhr.open("GET", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var local = layui.layStorage.data(setter.tableName);
        var accessToken = local[setter.request.tokenName];
        xhr.setRequestHeader(setter.request.tokenName, accessToken);
        xhr.send();
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {   // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
            if (this.status === 200) {
                var blob = this.response;
                var headerName = xhr.getResponseHeader("Content-disposition").split("=");
                let fileName = "";
                if (headerName && headerName.length == 2) {
                    fileName = decodeURIComponent($.trim(headerName[1]));
                }
                var reader = new FileReader();
                reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a标签href
                reader.onload = function (e) {
                    // 转换完成，创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = fileName;			//自定义下载文件名称
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                }
            } else {
                alert("出现了未知的错误!");
            }
        }

post（示例）：

		var param = {};//请求参数
        let xhr = new XMLHttpRequest();
        var url = 请求;
        xhr.open('post', url);
        //如果需要请求头中这是token信息可以在这设置
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        let local = layui.layStorage.data(setter.tableName);
        let accessToken = local[setter.request.tokenName];
        xhr.setRequestHeader('accessToken', accessToken);
        xhr.responseType = 'blob';
        xhr.send(JSON.stringify(param));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const blob = new Blob([xhr.response]);
                let url = window.URL.createObjectURL(blob);

                //创建一个a标签元素，设置下载属性，点击下载，最后移除该元素
                let link = document.createElement('a');
                link.href = url;
                link.style.display = 'none';

                //取出下载文件名
                link.setAttribute('download', exportName);//下载文件名称
                link.click();
                window.URL.revokeObjectURL(url);
            }
        };

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。