excel抓取网页动态数据(一个动态多级表头动态生成盘)

　　excel抓取网页动态数据(一个动态多级表头动态生成盘)

　　标题是动态生成的。该场景用于从数据库中读取表头，方便后续修改表头字段。前端导出为开源插件table2excel.js。此导出有限制。只能导出doom元素中本页的数据。不适合分页数据。

　　返回一个二进制数组，并在后台构建对应的数据格式：

　　

　　前端对返回的数据进行处理，并压入一个空数组，形成动态多级表头。

　　var header= [];

var header1= [

{

title: "编号",

type: "numbers",

align: "center",

width: 80,

rowspan: 2

}, {

title: "姓名",

field: 'name',

align: "center",

width: 120,

rowspan: 2

}];

var header2= [];

$.ajax({

type: "post",

url: "",

dataType:"json",

async:false,

success: function (data) {

console.log(data)

if (data.code === 0){

var djs=data.data[0][0];

console.log(djs)

header1.push({align: 'center', title: djs, colspan:3});

var sdarr=["基数"];

var newArr = delArr(sdarr,data.data[0]);//只需要一个三列表头，其余是二列的。

console.log(newArr);

$.each(newArr, function (index, obj) {

// console.log(obj)

header1.push({align: 'center', title: obj, colspan:2});

});

$.each(data.data[1], function (index, obj) {

//拼接成官网所需要的数组

header2.push({field: obj.field1, title: obj.title1 });

header2.push({field: obj.field2, title: obj.title2 });

header2.push({field: obj.field3, title: obj.title3 });

});

$.each(data.data[2], function (index, obj) {

//拼接成官网所需要的数组

header2.push({field: obj.field1, title: obj.title1 });

header2.push({field: obj.field2, title: obj.title2 });

});

$.each(data.data[3], function (index, obj) {

//拼接成官网所需要的数组

header2.push({field: obj.field1, title: obj.title1 });

header2.push({field: obj.field2, title: obj.title2 });

});

$.each(data.data[4], function (index, obj) {

//拼接成官网所需要的数组

header2.push({field: obj.field1, title: obj.title1 });

header2.push({field: obj.field2, title: obj.title2 });

});

$.each(data.data[5], function (index, obj) {

//拼接成官网所需要的数组

header2.push({field: obj.field1, title: obj.title1 });

header2.push({field: obj.field2, title: obj.title2 });

});

header1.splice(10,0,

, {

title: '操作',

toolbar: '#barDemo',

fixed:"right",

width: 80,

rowspan: 2

});//固定操作列

header.push(header1);

header.push(header2);

console.log(header);//所需的表头push到一个总的数组里

}

}

});

var table2Excel;

let TableC= table.render({

id: 'demo',

elem: '#demo'

, url: '' //数据接口

, cellMinWidth: 80

, limit: 10//每页默认数

, limits: [10, 20, 30, 40, 50, 100]

, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档

layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局

, curr: 1 //设定初始在第 1 页

},request: {

pageName: "page",

limitName: "rows"

},

response: {

statusCode: 0,

countName: 'total', //规定数据总数的字段名称，默认：count

dataName: 'data' //规定数据列表的字段名称，默认：data

},

loading:true, //是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式

title:"记录表", //

//cellMinWidth:60, //全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth

text:{

none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增

}, //自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。

autoSort:true,

skin:"row", //用于设定表格风格，若使用默认风格不设置该属性即可line （行边框风格） row （列边框风格） nob （无边框风格）

even:true, //若不开启隔行背景，不设置该参数即可

//size:"lg", //用于设定表格尺寸，若使用默认尺寸不设置该属性即可

parseData: function(res) {

var ss = {

data: res.rows,

code: 0,

total: res.total,

}

return ss

},

done:function(){

console.log("数据渲染完了！")

table2Excel = new Table2Excel();

table2Excel.append($("#demo"));//遍历页面上layui生成的div，抓取里面的格式与数据，来手动append到table中，再控制该table隐藏，来为导出做准备。

//console.log(table2Excel.append($("#demo")))

}

, cols: header

});

// 导出excel点击事件

$('#exportElemId').click(function(){

let fileName = 'XXX-20200xxxx';

table2Excel.exportLayTable($('#demo'),fileName);

});

　　百度网盘：table2Excel.js

　　提取码：5u9h

　　使用方法：

　　上面的js已经存在。数据表渲染完成后，在done函数中进行相关的遍历操作

　　var table2Excel ;

table.render({

elem: '#demo',

...

done: function (res, curr, count) {

table2Excel = new Table2Excel();

table2Excel.append($("#tableId"));

})

});

// 导出excel点击事件

$('#exportElemId').click(function(){

let fileName = 'XXX-20200xxxx';

table2Excel.exportLayTable($('#tableId'),fileName);

});

　　导出效果：

　　

　　参考：