xlsx使用table_to_book报错Uncaught Unsupported origin when DIV is not a TABLE

背景:const workbook = XLSX.utils.table_to_book(document.querySelector('#table-export'),{

raw: true//保留原始字符串

})报错Uncaught Unsupported origin when DIV is not a TABLE

原因:el-table是div格式

过程1:获取深层次的table,但是只获取到了表头数据

javascript 复制代码
const workbook = XLSX.utils.table_to_book(document.querySelector('#table-export').getElementsByTagName("TABLE")[0],{
    raw: true//保留原始字符串
})

过程2:遍历table,但是表头和表体分开在了两个sheet中

javascript 复制代码
const table = document.querySelector('#table-export') as HTMLTableElement;
  var wb = XLSX.utils.book_new();
  var children = table.getElementsByTagName("TABLE");
  for (var i = 0; i < children.length; ++i) {
    var ws = XLSX.utils.table_to_sheet(children[i]);
    XLSX.utils.book_append_sheet(wb, ws, "Sheet" + (i + 1));
  }

过程3: 使用table_to_sheet再用sheet_to_json,将json对象用concat拼接,最后json_to_sheet放到一个sheet中。但是由于有合并单元格,在sheet_to_json过程中格式乱掉了

解决:考虑在table_to_sheet之前,先将table的thead和tbody进行拼接,形成一个完整的table

javascript 复制代码
// 导出为 Excel
const exportMergedCellsToExcel = () => {
  const table = document.querySelector('#table-export') as HTMLTableElement;
  // 创建一个新的工作簿
  let wb = XLSX.utils.book_new();
  // 获取表格的表头table
  let tableHead = table.getElementsByTagName("TABLE")[0]
  // 获取表格的表体
  let tableBody = table.getElementsByTagName("TABLE")[1].getElementsByTagName("TBODY")[0]
  // 将表体添加到表头table中
  tableHead.appendChild(tableBody)
  // 创建一个新的工作表
  let ws = XLSX.utils.table_to_sheet(tableHead);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  // 将工作簿保存为 Excel 文件
  XLSX.writeFile(wb, '总分均分统计.xlsx');
};
相关推荐
dy171736 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5