最近遇到需要将页面中的table数据导出的情况,发现export2excel能够实现合格功能,因此分析了其中代码,加深自己的理解。
下面是我分析之后完成的代码,添加了一些注释方便大家理解。
/* eslink-disable */
// 需要引用xlsx和file-saveas两个依赖
import XLSX from 'xlsx'
import {
saveAs } from 'file-saver'
// 将数据导出为excel
// var table = document.querySelectorAll('table')
// var row = table[0].querySelectorAll('tr')
// console.log(table[0])
// 将页面中的表格数据拿出来
function generateArray (table) {
// 存放innerText
var out = []
// 获取页面行
var rows = table.querySelectorAll('tr')
// 每个元素占据的位置
var range = []
// 遍历各个行
for (var i = 0; i < rows.length - 1; i++) {
var outRow = []
var row = rows[i]
// 每一行中的列
var cols = row.querySelectorAll('td')
// 遍历每一列
for (var j = 0; j < cols.length; j++) {
// 每一个具体的列
var col = cols[j]
var colspan = col.getAttribute('colspan')
var rowspan = col.getAttribute('rowspan')
var colValue = col.innerText
if (colValue !== '' && colValue === +colValue) {
colValue = +colValue
}
if (colspan || rowspan) {
rowspan = rowspan || 1
colspan = colspan || 1
// 确定该列的位置和占据的大小
range.push({
// 开始位置
s: {
r: i,
c: outRow.length
},
// 结束位置
e: {
r: i + rowspan - 1,
c: outRow.length + colspan - 1
}
})
}
// 将值传入outRow中
outRow.push(colValue !== '' ? colValue : null)
// 如果colspan大于1,在后面填满null,确定位置
if (colspan > 1) {
for (var k = 0; k < colspan - 1; k++) {
outRow.push(null)
}
}
}
// 向out传递这一行的innerText,包含null
out.push