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,但是只获取到了表头数据

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

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

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

// 导出为 Excel
const exportMergedCellsToExcel = () => {const table = document.querySelector('#table-export') as HTMLTableElement;// 创建一个新的工作簿let wb = XLSX.utils.book_new();// 获取表格的表头tablelet 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');
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/98674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单聊聊 TCP 协议

简单聊聊 TCP 协议 如何实现可靠传输 ?完全可靠存在比特差错存在丢包流水线可靠数据传输协议回退N步 (GBN)选择重传 (ARQ) 小结 TCPTCP 连接报文段结构序号和确认号 可靠数据传输避免重传超时时间加倍快速重传回退N步还是选择重传 流量控制连接管理拥塞控制拥塞原因拥塞控制方…

Nacos 监控手册

Nacos 0.8.0版本完善了监控系统&#xff0c;支持通过暴露metrics数据接入第三方监控系统监控Nacos运行状态&#xff0c;目前支持prometheus、elastic search和influxdb&#xff0c;下面结合prometheus和grafana如何监控Nacos。与elastic search和influxdb结合可自己查找相关资料…

sqlsugar批量插入数据

表模型 /// <summary> /// 当和数据库名称不一样可以设置表别名 指定表明 /// </summary> [SugarTable("dbstudent")] public class Student {/// <summary>/// 数据库是自增才配自增 /// </summary>[SugarColumn(IsPrimaryKey true, IsId…

前端技术(16) : 插件集合

1.粘贴板 参考 https://www.cnblogs.com/wyhlightstar/p/8950430.html 安装 npm install --save vue-clipboard2main.js添加 import VueClipboard from vue-clipboard2 Vue.use(VueClipboard) 使用(复制字段为"time5") <el-button class"ml10" t…

css如何实现页面布局与五种实现方式

CSS布局实现的主要方式有以下几种&#xff1a; 一、盒模型布局&#xff1a;CSS中&#xff0c;每个元素都是一个盒子&#xff0c;包括内容、内边距、边框和外边距。通过设置盒子的属性&#xff08;如宽度、高度、内边距、边框、定位等&#xff09;&#xff0c;可以实现不同的布…

开发者指南:如何集成一对一直播美颜SDK到你的应用中

本文将为开发者们提供一个详细的指南&#xff0c;教你如何将一对一直播美颜SDK集成到你的应用中&#xff0c;以提供更具吸引力的直播体验。 -为什么选择一对一直播美颜SDK&#xff1f; 在开始之前&#xff0c;让我们先明确一下为什么选择一对一直播美颜SDK是一个明智的决定。…

PS之ICO插件ICOFormat

ICOFormat简介&#xff1a; 强大的图片编辑处理软件photoshop竟然一直不支持ico格式的图标文件&#xff0c;这真让人恼火。还好&#xff0c;有热心人开发了一款名叫ICOFormat的PS插件&#xff0c;利用它&#xff0c;就可以在photoshop中打开&#xff0c;编辑和保存ico文件了。…

uni-app:实现页面效果4(echarts数据可视化)

效果 代码 <template><view><view><view class"title">概况</view><view class"line_position"><view class"line1"><view class"item"><view class"one">今日销售…

图像分块及拼接

原图&#xff1a; 分块结果&#xff1a; 拼接结果&#xff1a; 代码&#xff1a; import numpy as np import cv2 as cv import matplotlib.pyplot as pltdef get_patch(img,patch_size):imgs []h,w,n img.shapenew_h, new_w patch_size, patch_sizecolint(w/patch_siz…

java生成一个符合密码学和安全性的随机秘钥

有时 我们在生成token 或者完成某种加密形式时会需要一个秘钥 但是 有些时候 项目开发并没有规定用什么秘钥 但是 秘钥都是要有一定格式规范的 我们可以通过以下代码生成一个随机秘钥 import java.security.SecureRandom; import java.util.Base64;public class TokenGenerat…

Ubuntu 20.04使用源码安装nginx 1.14.0

nginx安装及使用&#xff08;详细版&#xff09;是一篇参考博文。 http://nginx.org/download/可以选择下载源码的版本。 sudo wget http://nginx.org/download/nginx-1.14.0.tar.gz下载源代码。 sudo tar xzf nginx-1.14.0.tar.gz进行解压。 cd nginx-1.14.0进入到源代码…

nginx-proxy反向代理缓存

介绍&#xff1a; 反向代理缓存&#xff0c;类似于动静分离&#xff0c;即通过nginx代理服务器根据客户端发送的url请求&#xff0c;去后台服务器获取数据&#xff0c;将静态数据缓存到nginx代理服务器上&#xff0c;并配置有过期时间&#xff0c;当客户端下次以相同的url请求…

[鹏城杯 2022]简单的php - 无数字字母RCE+取反【*】

[鹏城杯 2022]简单的php 一、解题流程二、思考总结 题目代码&#xff1a; <?php show_source(__FILE__);$code $_GET[code];if(strlen($code) > 80 or preg_match(/[A-Za-z0-9]|\|"||\ |,|\.|-|\||\/|\\|<|>|\$|\?|\^|&|\|/is,$code)){die( Hello);}e…

专业的园林景观设计师到底需要学什么?优漫动游

随着可持续发展科学发展观的普及与重视&#xff0c;园林生态城市逐渐成为生活在钢筋水泥中人们的理想目标。而想要达到人与自然生态和谐相处的生活要求&#xff0c;正需要运用到园林景观设计学相关专业知识。 专业的园林景观设计师到底需要学什么&#xff1f; 庞大的社会需…

时序预测 | MATLAB实现ICEEMDAN-IMPA-LSTM时间序列预测

时序预测 | MATLAB实现ICEEMDAN-IMPA-LSTM时间序列预测 目录 时序预测 | MATLAB实现ICEEMDAN-IMPA-LSTM时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 ICEEMDAN-IMPA-LSTM功率/风速预测 基于改进的自适应经验模态分解改进海洋捕食者算法长短期记忆网络时间序…

leetcode - 2038. Remove Colored Pieces if Both Neighbors are the Same Color

Description There are n pieces arranged in a line, and each piece is colored either by ‘A’ or by ‘B’. You are given a string colors of length n where colors[i] is the color of the ith piece. Alice and Bob are playing a game where they take alternatin…

C++统一初始化和初始化列表

一直对C初始化使用圆括号和花括号的区别有所疑惑&#xff0c;参考书籍和博客简单总结一下 文章目录 常见的初始化操作统一初始化(Uniform Initialization)初始化列表(Initializer Lists) 常见的初始化操作 对于一个基础数据类型进行初始化&#xff0c;比如 int&#xff1a; i…

深度学习基础知识 nn.Sequential | nn.ModuleList | nn.ModuleDict

深度学习基础知识 nn.Sequential &#xff5c; nn.ModuleList &#xff5c; nn.ModuleDict 1、nn.Sequential 、 nn.ModuleList 、 nn.ModuleDict 类都继承自 Module 类。2、nn.Sequential、nn.ModuleList 和 nn.ModuleDict语法3、Sequential 、ModuleDict、 ModuleList 的区别…

【多线程进阶】线程安全的集合类

文章目录 前言1. 多线程环境使用 ArrayList2. 多线程环境使用队列3. 多线程环境使用哈希表3.1 HashTable3.2 ConcurrentHashMap 总结 前言 本文主要讲解 Java 线程安全的集合类, 在之前学习过的集合类中, 只有 Vector, Stack, HashTable, 是线程安全的, 因为在他们的关键方法中…

vue项目中使用rem替换px-使用方法-03-使用插件

使用场景:有适配pc端改为适配pc端和移动端,使用2套css App.vue created: function () {if(document.documentElement.clientWidth > 640){require(./style/index.:);this.plaform = pc;}else{require(./style/mobile.scss);this.plaform = mobile;} } 注意: 为2套css分…