该代码实现了将表格数据导出为 Excel 文件的功能。它首先对表格数据进行去重操作,然后复制表格元素,并在副本上移除固定列。接下来,它将副本表格转换为工作表对象,并根据表头单元格的宽度设置工作表的列宽。最后,它创建一个工作簿对象,将工作表添加到工作簿中,并将工作簿保存为 Excel 文件。
整个导出过程经过逻辑整理和优化,以确保导出的数据准确、去重,并且在 Excel 中正确显示。
思路:
-
首先,通过打印
this.tableData
,可以查看原始数据。 -
然后,使用
uniqBy
函数对数据进行去重操作,以确保导出的数据中每个条目基于createTime
字段的唯一性。 -
接下来,创建一个新的
table
元素,并将表格组件this.$refs.multipleTable.$el
的HTML内容赋值给新创建的table
元素。这样做是为了获取到完整的表格结构。 -
通过查询具有
.is-fixed
类的列,找到固定列,并将其从表格中移除,以便导出的Excel文件不包含固定列。 -
使用
XLSX.utils.table_to_sheet
函数将新创建的table
转换为工作表对象ws
。 -
通过查询
thead
下的th
元素,获取表头单元格,并根据单元格的宽度计算每列的宽度,并将其存储为列配置对象wscols
。 -
将列配置对象
wscols
设置为工作表对象ws
的列宽度。 -
创建一个新的工作簿对象
wb
。 -
使用
XLSX.utils.book_append_sheet
函数将工作表对象ws
添加到工作簿对象wb
中,并命名为'Sheet1'。 -
最后,使用
XLSX.writeFile
函数将工作簿对象wb
保存为名为'table-data.xlsx'的Excel文件。
// 导出
exportExcel() {
console.log('原始数据:', this.tableData) // 打印原始数据
const uniqueData = uniqBy(this.tableData, 'createTime') // 对数据进行去重
console.log('去重后的数据:', uniqueData) // 打印去重后的数据
const table = document.createElement('table') // 创建一个新的table元素
table.innerHTML = this.$refs.multipleTable.$el.outerHTML // 将表格的HTML内容赋值给新创建的table元素
const fixedColumns = this.$refs.multipleTable.$el.querySelectorAll('.is-fixed') // 获取所有具有 .is-fixed 类的列
fixedColumns.forEach(column => column.remove()) // 移除具有 .is-fixed 类的列
const ws = XLSX.utils.table_to_sheet(table) // 将table转换为工作表对象
const headerCells = table.querySelectorAll('thead th') // 获取表头单元格
const wscols = Array.from(headerCells).map(cell => {
return { wch: Math.max(cell.offsetWidth / 7, 10) } // 计算每列的宽度并存储为列配置对象
})
ws['!cols'] = wscols // 设置工作表的列宽度
const wb = XLSX.utils.book_new() // 创建一个新的工作簿对象
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') // 将工作表添加到工作簿中,命名为'Sheet1'
XLSX.writeFile(wb, 'table-data.xlsx') // 将工作簿保存为名为'table-data.xlsx'的文件
}