浏览器控制台中使用ajax下载文件通用代码（没有postman等情况下）

有时候，可能电脑里面没有

postman

（比如内网），然后又需要导出一些文件，前端又没有提供相应的功能（比如循环调用导出等），这时候我们就可以通过在控制台写代码的方式来实现了。这个还是在帮同事处理实施的问题时候想到的，当时在内网环境，同时导出4000家单位处理之后的数据系统会卡死，然后就用了这种方式，写代码循环了5次来分批导出。
注意：因为是在浏览器中使用，所以会有跨域问题，除非后端处理了跨域问题，否则只能请求当前页面的地址，总之就是一句话，你代码里面能发送的ajax请求，控制台里面也能。

代码实现

下面的代码定义了一个对象

$$$

，里面最主要的就是

downLoad

方法，后面就是调用这个方法来下载文件。在调用

download

方法之前，可能需要初始化请求方式（默认

POST

）和请求头等，具体可以看下面的属性介绍。

download

主要是通过

XHR

来发送

ajax

请求

const $$$ ={// 默认POST方法method:'POST',// 请求头对象，可以是map类型，也可以是对象类型，如果有token等要放请求头的，可以设置这个值header:null,// 文件名称处理程序，如果为空，则使用时间戳fileNameHandler:null,/**
     * 下载文件的方法
     *
     * @param url 请求地址
     * @param data body体，可以为空
     */downLoad(url, data){if(!url){return console.error("地址不能为空");}if(!this.method){return console.error("http请求方法为空");}elseif(!['get','GET','post','POST'].includes(this.method)){return console.error("http请求方法只能是get、post，当前请求方法："+this.method);}const xhr =newXMLHttpRequest();
        xhr.responseType ='blob';const _this =this;
        xhr.onload=function(){if(this.status ===200){// 创建一个新的Blob对象，从XHR的response中获取数据const blob =newBlob([this.response],{type:'application/octet-stream'});let name;// 从函数里面获取名称if(!!_this.fileNameHandler && _this.fileNameHandler instanceofFunction){
                    name = _this.fileNameHandler(xhr);}if(!name){
                    name = Date.now().toString();}// 创建一个a标签用于下载const a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);// 创建指向blob对象的URL
                a.download =decodeURI(name);// 设置下载文件的文件名
                a.style.display ='none';// 隐藏a标签// 将a标签添加到DOM中
                document.body.appendChild(a);// 触发a标签的点击事件，开始下载
                a.click();// 下载完成后，移除a标签
                document.body.removeChild(a);}};
        xhr.open(this.method, url);
        xhr.setRequestHeader("Content-Type","application/json, text/plain, */*");
        xhr.setRequestHeader("accept","application/json;charset=UTF-8");if(!!this.header){// 如果是map类型的if(this.header instanceofMap){this.header.forEach((value, key)=>{
                    xhr.setRequestHeader(key, value);})}elseif(this.header instanceofObject){for(let[key, value]of Object.entries(this.header)){
                    xhr.setRequestHeader(key, value);}}else{
                console.warn("header形参非对象或map类型，未设置到请求头中");}}
        xhr.send(data);},setMethod(method){this.method = method;returnthis;},setHeader(header){this.header = header;returnthis;},setFileNameHandler(fileNameHandler){this.fileNameHandler = fileNameHandler;returnthis;}}

属性

method

http

请求方法，默认

POST

，可以通过

$$$.method

方式或者

$$$.setMethod

方式改成

GET

请求。

header

请求头，如果需要携带一些头部信息，就可以设置这个值，这个值类型可以是对象，也可以是

map

。只要不为空，就会添加到请求头中。

fileNameHandler

文件名称处理器，用来处理导出的文件名称，如果为空，则会使用时间戳当文件名。这个需要自定义，一般我们都会把文件名称放到Content-Disposition头中，这个和后端处理逻辑有关，可以根据自己的需要设置这个函数。
示例：

// 以下两种方式设置都行
$$$.fileNameHandler=(xhr)=>{// 具体的文件名称处理逻辑，这里只是示例，我这边的是直接替换掉头部的字符然后返回return xhr.getResponseHeader('Content-Disposition').replace('attachment;filename=','');}

$$$.setFileNameHandler((xhr)=>{return xhr.getResponseHeader('Content-Disposition').replace('attachment;filename=','');})

方法

为了方便赋值，里面有三个

setXXX

方法，都返回了

this

对象，可以链式调用。