【花城报表系统】开源、免费、绿色

为谁风露立中霄

一、需求分析
浏览天梯赛事数据时，想将页面上所有的名单和数据导出为excel进行统计，奈何官方不提供导出功能，所以有次系统。再扩展一下，所有网页上的表格，都可用本系统进行导出为excel


二、技术方案
主流框架vue+elementui，包函vuex，vue-router，sass，nodejs等技术栈


三、使用说明
将压缩包解压到桌面，双击运行【index.html】即可，压缩包放在文末。
本系统提供2种方式将页面导出为excel：
3.1 html导出
首先将鼠标放在想导出的表格的位置，右击检查(打开开发者工具)，然后将整个表格区域选中，在html区域，按f2进入编辑模式，然后ctrl+a全选，ctrl+c复制；
以天梯数据为例，如下：

然后打开本系统，点击“导出”菜单，在“html导出”标签页，将复制出来的代码，粘贴到文本框，下方预览实时生成，然后点击导出即可；如下：

导出excel预览：

此方式优缺点：
优：1.所见即所得；2.操作简单，不需要技术基础
缺：1.如果是分页表格，不能一次性导出所以记录；2.导出的excel没有表格，这跟页面表格题头设置有关，所以问题不大！

3.2 json导出
  3.2.1 获取json数据
  还是以天梯数据为例，f12打开开发者工具，在“网络”标签页观察，点击页面上的分页时，会有请求记录，这就是数据来源，如下：

双击名称列，会在浏览器新标签页打开，页面上就是返回的json数据。但是，这只有10条，所以需要修改请求参数：
https://tx3competition.webapp.163.com/get_rank_data?callback=jQuery111304722861905589565_1752711307029&season=16&type=80&sort=%2Brank&start=0&span=300&_=1752711307033
其中，start表示从第几个开始（索引从0开始），span表示取多少个，这个链接就是取全部300人，不要问为什么是300，因为官方只给300.
这些数据也不是全都要的，只需要"data"后面的"[{...}]",将这些复制下来，打开本系统，切换到“json导出”标签页，在json文本框种，粘贴前面复制的数据，然后在配置列中，设置需要导出的列。为方便操作，本系统设置了默认值，点击页面上的“使用测试数据”，页面会生成初始数据，配置列不用改，只需要把json文本框中的内容替换掉即可；然后点击“生成表格”，再“导出”。

导出结果预览：

此导出方式优缺点：
优：1.终于有表头了；2.数据更全
缺：无，非要说的话，这种方式需要一定的技术基础

本系统地址：https://pan.baidu.com/s/1tKrTzDSSREpWUrNlnw_rSg?pwd=abcd 提取码: abcd

四、结语：势力纳新，中立副本势力【花城】诚招奶妈，来了就送cp
附上势力活动安排：
【势力活动日程】
①［周三］第1、第2团极境+20
②［周四］晚上8点演兵
③［周五］晚上8点山河策
④［周六］晚上8点左右势力本捞鱼
⑤［周日］下午3点、晚上8点左右势力本
⑥［周一］晚上8点忘川，第3团极境+20
⑦［周二］晚上9点葫芦岛
【如有特殊情况，灵活变通】

超越自我

厉害了

为谁风露立中霄

html导出没有表头的解决方案：把所有“th”替换成“td”