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结合可自己查找相关资料…

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

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

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…

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…

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

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

深度学习基础知识 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, 是线程安全的, 因为在他们的关键方法中…

anaconda安装及配置+pytorch安装与配置(自用笔记)

anaconda安装及配置 1、anaconda官网下载安装包 下载好后进行安装 2、anaconda安装地址(记住安装路径)&#xff1a; 3、配置环境变量 打开anaconda prompt: 输入命令conda list: 可以看到安装好的很多包&#xff01; 至此anaconda配置完成。 PyTorch的安装与配置 使用con…

分库分表理论总结

一、概述 分库分表是在面对高并发、海量数量时常见的数据库层面的解决方案。通过把数据分散到不同的数据库中&#xff0c;使得单一数据库的数据量变小来缓解单一数据库的性能问题&#xff0c;从而达到提升数据库性能的目的。比如&#xff1a;将电商数据库拆分为若干独立的数据…

Android 自定义PopupWindow,实现下拉框

1、效果图 2、前言 1、页面由 MagicIndicator ViewPager2 Fragment 实现&#xff1b; 2、下拉框是基于WindowManager实现&#xff1b; 3、我使用PopupWindow实现下拉框时&#xff0c;发现一个问题&#xff0c;PopupWindow 在窗口显示的情况下&#xff0c;无法直接从外部修…

面试经典 150 题 4 —(数组 / 字符串)— 80. 删除有序数组中的重复项 II

80. 删除有序数组中的重复项 II 方法一 class Solution { public:int removeDuplicates(vector<int>& nums) {int len 0;for(auto num : nums)if(len < 2 || nums[len-2] ! num)nums[len] num;return len;} };方法二 class Solution { public:int removeDupli…

Rabbitmq安装-docker版

1.简介 2.安装消息队列 下载地址https://www.rabbitmq.com/download.html 使用docker方式安装 需要先下载docker&#xff0c;参考文章https://blog.csdn.net/weixin_43917045/article/details/104747341?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22arti…

操作系统备考学习 day7 (2.3.4 ~ 2.3.5)

操作系统备考学习 day7 第二章 进程与线程2.3 同步与互斥2.3.4 信号量 用信号量实现进程互斥、同步、前驱关系信号量机制实现进程互斥信号量机制实现进程同步信号量机制实现前驱关系 2.3.5 经典同步问题生产者-消费者问题多生产者和多消费者模型抽烟者问题读者-写者问题哲学家进…

使用运放产生各种波形

目录复制 文章目录 RC正弦振荡电路文氏电桥振荡电路移项式正弦波振荡电路 集成函数发生器运算放大器驱动电容性负载峰值检波多通道运放未使用的运放接法 RC正弦振荡电路 文氏电桥振荡电路 这个振荡器起振条件RF > 2R1,起振后又希望RF 2R1产生矛盾怎么办&#xff1f; 将RF换…

centos7终端无图形界面安装tbb

1、官网下载tbb&#xff1a; https://www.intel.com/content/www/us/en/developer/articles/tool/oneapi-standalone-components.html#onetbb 2、终端执行&#xff1a; ./l_tbb_oneapi_p_2021.10.0.49543_offline.sh -a --cli3、cd /opt/intel/oneapi 4、source setvars.sh …

LeetCode 1251. 平均售价

题目链接&#xff1a;1251. 平均售价 题目描述 表&#xff1a;Prices Column NameTypeproduct_idintstart_datedateend_datedatepriceint (product_id&#xff0c;start_date&#xff0c;end_date) 是 prices 表的主键&#xff08;具有唯一值的列的组合&#xff09;。 price…