React实现获取门户信息并将结果生成Excel
获取门户信息
遇到了一个需求,平台管理人员想获取ArcgisOnline上的用户信息,包括邮箱、用户名、角色等。想法是向Rest api提供的url发送请求,获取到信息后以数组的形式存储到state中,最后按照信息字段生成Excel。
1.发送请求
安装Axios,用于发送请求
npm isntall react-axios
然后在Online上通过Network查找请求的url和请求参数,找到所需要的的url和参数后直接就可以开始写了。定义好按钮后onClike事件绑定函数
<button onClick={this.postitem}>获取信息</button>
postitem=()=>{
const data={
sortField: 'lastlogin',
sortOrder: 'desc',
start:1,
num:100,
total: 0,
nextStart: -1,
applyFiltersIntersection: 'false',
excludeSystemUsers: 'true',
f: 'json',
token:this.state.tokenmanager
}
const params = qs.stringify(data);//将对象序列化成URL的形式,以&进行拼接
Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users',params)
.then(
(res) => {
const users =res.data.users
})
}
其中比较重要的参数为:start(请求数量),token(管理员令牌,需要提前获取)
其他的参数按照Online给出的默认数值即可,最后还需要将用户数据存入state中以便提取,要注意获取到的users是数组的形式。
请求完后发现Rest Api限制了请求数量,每次只能请求100条 ,但Online上的用户数目将近15000个,所以需要对请求进行递归。
2.请求递归多次获取数据并存入state中
想法是每次请求结束后回调执行返回函数,并让请求参数start加100,且每次请求完将响应的数据以数组的形式拼接为一个数组,存入state里。
首先需要在组件外定义两个变量,一个用于start赋值,一个用于控制this指向
var count=1;
var mySelf;
对请求进行递归并将数组存入state中
postitrm=()=>{
mySelf = this;
...
Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users',params)
.then(
(res) => {
//设置定时器控制请求速度
setTimeout( ()=>{if(count<15101){
const users=res.data.users
count = count + 100;
console.log('第:'+count%100 + '次请求');
//用concat将数组拼接存入state中
this.setState({users:this.state.users.concat(users)})
//返回函数
mySelf.postitem();
// return this.postitem(cont+100)
}
else{
return this.state.users
}},500)
})
}
这里使用了concat方法拼接数组,要注意当start数值小于150101返回的是函数,但超过这个值时需要返回state让组件重新render渲染并停止请求。
可以看到state里面users已经正在以0.5秒的速度存入数组了
3.将数据生成Excel
感谢这个作者提供的方法《React ant design表格导出数据为EXCEL表格数据》
首先安装插件js-export-excel
npm install js-export-excel
引入
import exportexcel from "js-export-excel"
接着写好按钮后就可以直接调用了
downexcel=()=>{
var option={};
let dataTable = [];
//将state中的数组遍历把需要的数据存入新数组中
this.state.users.map((data)=>{
let obj={
user: data.username,
fristname: data.firstName,
lastname: data.lastName,
email:data.email,
role:data.role
}
//存入新数组dataTable
dataTable.push(obj);
})
//定义excel
option.fileName = 'online数据'
option.datas=[
{
sheetData:dataTable,
sheetName:'sheet',
sheetHeader:['用户名','名字','姓氏','电子邮件','角色'],//表头
}
];
//导出Excel
var toExcel = new exportexcel(option);
toExcel.saveExcel();
}
方法其实很简单,定义一个对象一个数组,新数组用于将state中存储的数组按需求提取数据至新数组中,对象则是用于生成excel
最终效果:
4.全部代码
import React, {Component} from 'react';
import Axios from "axios";
import qs from 'qs'
import PubSub from "pubsub-js";
import exportexcel from "js-export-excel"
var count = 1;
var mySelf;
export default class Getuserinfo extends Component {
state = {
users: [],
}
componentDidMount() {
PubSub.subscribe('onlinetoken', (msg, tokenmanager) => this.setState(tokenmanager))//订阅Getmanager发布的token
}
postitem = () => {
mySelf = this;
const data = {
sortField: 'lastlogin',
sortOrder: 'desc',
start: count,
num: 100,
total: 0,
nextStart: -1,
applyFiltersIntersection: 'false',
excludeSystemUsers: 'true',
f: 'json',
token: this.state.tokenmanager
}
const params = qs.stringify(data);
Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users', params)
/*将获取到的数据提出,存储到state里*/
.then((res) => {
setTimeout(() => {
if (count < 15101) {
const users = res.data.users
count = count + 100;
console.log('第:' + count % 100 + '次请求');
this.setState({users: this.state.users.concat(users)})
mySelf.postitem();
// return this.postitem(cont+100)
} else {
return this.state.users
}
}, 500)})}
downexcel = () => {
var option = {};
let dataTable = [];
this.state.users.map((data) => {
let obj = {
user: data.username,
fristname: data.firstName,
lastname: data.lastName,
email: data.email,
role: data.role
}
dataTable.push(obj);
})
option.fileName = 'online数据'
option.datas = [
{
sheetData: dataTable,
sheetName: 'sheet',
sheetHeader: ['用户名', '名字', '姓氏', '电子邮件', '角色'],
}
];
var toExcel = new exportexcel(option);
toExcel.saveExcel();
}
render() {
return (
<div>
<button onClick={this.postitem}>获取信息</button>
<button onClick={this.downexcel}>导出excel</button>
</div>
);
}
}
5.要注意的
1.存入concat拼接一定要是单挑数据,不能是数组,否则拼接完后数据会在数组中的数组下
2.一定要为this设置变量赋值,否则返回函数时会出现指向错误
3.要设置定时器,以免对服务器造成负担,导致服务器崩溃