破解php网站后台账号密码,WordPress仿百家号主题,商城网站建设教程,制作公司网页及oa有时候#xff0c;可能电脑里面没有postman#xff08;比如内网#xff09;#xff0c;然后又需要导出一些文件#xff0c;前端又没有提供相应的功能#xff08;比如循环调用导出等#xff09;#xff0c;这时候我们就可以通过在控制台写代码的方式来实现了。这个还是在…有时候可能电脑里面没有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对象的URLa.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;charsetUTF-8);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类型未设置到请求头中);}}xhr.send(data);},setMethod(method) {this.method method;return this;},setHeader(header) {this.header header;return this;},setFileNameHandler(fileNameHandler) {this.fileNameHandler fileNameHandler;return this;}
}属性
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对象可以链式调用。
浏览器控制台中使用
代码复制到控制台
进入了自己的系统之后ctrl c,ctrl v把代码复制到控制台也可以把代码保存成一个文件然后拖到控制台会自行输入到控制台中。
初始化属性
这个按需配置改成符合自己的比如我这里需要给头部加上token而且请求是get
$$$.setHeader({authorization: 992fbef034d74d3f8b853a8c70d52922}).setMethod(get).setFileNameHandler((xhr) {return xhr.getResponseHeader(Content-Disposition).replace(attachment;filename, );})调用下载方法
控制台中直接调用download方法下载如果是post请求并且有body体通过第二个形参传入就行。
// 输入完成之后回车就会下载了
$$$.downLoad(http://xxx.xxx.xxx:port/export?idxxxx)$$$.downLoad(http://xxx.xxx.xxx:port/export?idxxxx, {})效果图
控制台导出文件技巧
上面的只是单个文件导出如果想实现其他的导出我们可以变通一下
批量导出
id连续的批量导出
比如我们需要导出id为1-500的数据文件每个id一个文件如果通过人为方式设置就太费时间了。可以在初始化一个变量i然后通过setInterval定义一个定时器这样我们可以设置一个间隔不至于发送的太快了定时器里面的逻辑每次调用下载一个文件然后i自增还要判断当前下载到了第几个如果500就下载下载完成之后记得清除定时器。
const interval setInterval(() {if(i 500){// 执行下载逻辑i} else {clearInterval(interval);}
}, 3000); // 时间可以根据需要配置我这里给了3000毫秒随机的id需要批量
可以在外部定义一个数组其他的同上面。
页面中存在导出按钮但是量太大会崩溃
有时候可能一次性想导出大量单位的数据但是后台会崩也不太可能通过人为一次选一批这样也太慢了。这种可以先把当前页面设置为禁止请求网络然后选择要导出的所有点击导出。再把网络打开。在network里面选中刚刚的那个请求在请求荷载里面把请求的id集合保存为控制台变量假设是通过id导出然后控制台里面就能拿到这个变量列表了。再通过列表截取的方式分成好几批来导出
