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

技术文档

有时候，可能电脑里面没有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请求方法为空\"); } else if (![\'get\', \'GET\', \'post\', \'POST\'].includes(this.method)) { return console.error(\"http请求方法只能是get、post，当前请求方法：\" + this.method); } const xhr = new XMLHttpRequest(); xhr.responseType = \'blob\'; const _this = this; xhr.onload = function () { if (this.status === 200) { // 创建一个新的Blob对象，从XHR的response中获取数据 const blob = new Blob([this.response], {type: \'application/octet-stream\'}); let name; // 从函数里面获取名称 if (!!_this.fileNameHandler && _this.fileNameHandler instanceof Function) {  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); if (!!this.header) { // 如果是map类型的 if (this.header instanceof Map) { this.header.forEach((value, key) => {  xhr.setRequestHeader(key, value); }) } else if (this.header instanceof Object) { for (let [key, value] of Object.entries(this.header)) {  xhr.setRequestHeader(key, value); } } else { console.warn(\"header形参非对象或map类型，未设置到请求头中\"); } } let reqData = data; if (!!data) { if (data instanceof Object) { reqData = JSON.stringify(reqData); } } xhr.send(reqData); }, setMethod(method) { this.method = method; return this; }, setHeader(header) { if (header != null) { if (!(header instanceof Map) && !(header instanceof Object)) { console.error(\"header形参非对象或map类型，不可设置\"); } } this.header = header; return this; }, setFileNameHandler(fileNameHandler) { this.fileNameHandler = fileNameHandler; return this; }, /** * 添加头 */ addHeader(key, value) { if (!this.header) { this.header = {}; this.header[key] = value; } if (!!key && !!value) { if (this.header instanceof Map) { this.header.set(key, value); } else if (this.header instanceof Object) { this.header[key] = value; } } return this; }, /** * 删除头部 * @param key 字符串类型删除单个，数组类型批量删除 */ deleteHeader(key) { if (key == null) { return; } const _this = this; if (!!this.header) { if (typeof key === \'string\') { removeKey(key); } else if (key instanceof Array) { key.forEach(t => {  removeKey(t); }) } else { console.warn(\"key非字符串类型或数组类型\"); } } function removeKey(k) { if (_this.header instanceof Map) { _this.header.delete(k); } else if (_this.header instanceof Object) { delete _this.header[k]; } } }}

属性

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对象，可以链式调用。还有添加单个头部和删除头部的方法，主要是为了方便修改请求头参数。