Html页面Table表格导出导入Excel文件 xlsx.full
Html页面Table表格导出Excel文件
引用 xlsx.full.min.js 文件
导出
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>--><script type="text/javascript">$(function () {$('#btnTableToExcel').click(function () {var wb = XLSX.utils.table_to_book(document.getElementById('gridTable'), { sheet: "Sheet1" });XLSX.writeFile(wb, 'Table表格数据.xlsx');});$('#btnJsonToExcel').click(function () {var test_data = [{"id": "1","name": "张三",},{"id": "2","name": "李四",}]exportXlsx(test_data);});function exportXlsx(data) {const book = XLSX.utils.book_new();const sheet = XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(book, sheet);XLSX.writeFile(book, 'Json表格数据.xlsx');}///读取table内容$('#btnRead').click(function () {$('#gridTable tr').each(function (rowIndex) {var data = {};$(this).find('td').each(function (columnIndex) {/*if (rowIndex > 0 && columnIndex == 2) {*/if (rowIndex > 0 && columnIndex > 1) {var inputValue = $('tr:eq(' + rowIndex + ') td:eq(' + columnIndex + ') input').val();data['column' + columnIndex] = inputValue;}else {data['column' + columnIndex] = $(this).text();}});console.log(data);});});});</script>
</head>
<body><input type="button" id="btnTableToExcel" value="Table导出Excel" /><input type="button" id="btnJsonToExcel" value="Json导出Excel" /><input type="button" id="btnRead" value="读取" /><br /><table id="gridTable" border="1"><tr><td>序号</td><td>姓名</td><td>年龄</td><td>电话</td></tr><tr><td>1</td><td>张三</td><td><input type="text" value="10" /></td><td><input type="text" value="13012345601" /></td></tr><tr><td>2</td><td>李四</td><td><input type="text" value="11" /></td><td><input type="text" value="13012345602" /></td></tr><tr><td>3</td><td>王五</td><td><input type="text" value="12" /></td><td><input type="text" value="13012345603" /></td></tr></table>
</body>
</html>*、导入
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>--><script type="text/javascript">$(function () {$('#fileInput').on('change', function (e) {var file = e.target.files[0]; // 获取选中的文件var reader = new FileReader();reader.onload = function (e) {var data = new Uint8Array(e.target.result); // 读取文件内容为 Uint8Arrayvar workbook = XLSX.read(data, { type: 'array' }); // 解析文件内容// 获取第一个工作表的名字var firstSheetName = workbook.SheetNames[0];var worksheet = workbook.Sheets[firstSheetName];方式1：header: 1//var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 转换为 二维数组 数据//console.log(JSON.stringify(jsonData))输出数据到页面//$('#output').empty(); // 清空输出区域//jsonData.forEach(function (row) {// $('#output').append('<p>' + row.join(', ') + '</p>'); // 将每行数据作为段落添加到页面中//});// 方式2：header: 2var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 0 }); // 转换为 JSON 数据；0、2好像都是转换为 JSON 数据console.log("Ln 34 Table:" + JSON.stringify(jsonData));var rowCount = $('#gridTable').get(0).rows.length - 1;console.log("Ln 36 Table:" + rowCount + ",Json:" + jsonData.length);var msg = "数据不匹配，请重新下载上传数据";var isContinue = true;if (rowCount != jsonData.length) {isContinue = false;alert(msg);return false;}var codes = [];if (isContinue) {console.log("Ln 192 table共 " + rowCount + " 数据,共 ：Excel共" + jsonData.length + " 数据");const isRate = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;$(jsonData).each(function (index, item) {var number = index + 1;codes.push($.trim(item.险种组合编码));var itemString = JSON.stringify(item).replace("手续费率%", "CounterRate").replace("劳务费率%", "ServiceRate").replace("政府补助费率%", "AgentRate").replace("服务费率%", "CoverRate")console.log("Ln 209 " + itemString);var newItem = jQuery.parseJSON(itemString);console.log("Ln 211 " + newItem.CounterRate);if (isRate.test(newItem.CounterRate) == false) {isContinue = false;alert("第 " + number + " 行，手续费率% 数据格式错误");return false;}if (isRate.test(newItem.ServiceRate) == false) {isContinue = false;alert("第 " + number + " 行，劳务费率% 数据格式错误");return false;}if (isRate.test(newItem.AgentRate) == false) {isContinue = false;alert("第 " + number + " 行，政府补助费率% 数据格式错误");return false;}if (isRate.test(newItem.CoverRate) == false) {isContinue = false;alert("第 " + number + " 行，服务费率% 数据格式错误");return false;}});if (isContinue) {//var codes = jsonData.map(function (x) {// return $.trim(x.险种组合编码)//});console.log("Ln 196 Excel 原始数据：" + codes);var uniqueExcelCodes = codes.filter(function (item, index, self) {return index === self.findIndex(function (t) {return t === $.trim(item);});});console.log("Ln 202 Excel 去重后数据：" + uniqueExcelCodes);codes.sort(function (a, b) {return $.trim(a) - $.trim(b);});console.log("Ln 206 Excel 去重、排序后数据：" + codes);var tableCodes = [];$('#gridTable tr').each(function (rowIndex) {if (rowIndex > 0) {var code = $('tr:eq(' + rowIndex + ') td:eq(2)').text();console.log("Ln 211：第 " + rowIndex + " 行，编码：" + code);tableCodes.push($.trim(code));}});console.log("Ln 215 Table 原始数据：" + tableCodes);var uniqueTableCodes = tableCodes.filter(function (item, index, self) {return index === self.findIndex(function (t) {return t === $.trim(item);});});console.log("Ln 221 Table 去重后数据：" + uniqueTableCodes);tableCodes.sort(function (a, b) {return $.trim(a) - $.trim(b);});console.log("Ln 225 Table 去重、排序后数据：" + tableCodes);if (uniqueTableCodes.length != uniqueExcelCodes.length) {isContinue = false;alert(msg);return false;}else {for (var i = 0; i < uniqueTableCodes.length; i++) {if ($.trim(uniqueTableCodes[i]) !== $.trim(uniqueExcelCodes[i])) {var number = i + 1;isContinue = false;console.log("Ln 237 Table编码：" + uniqueTableCodes[i] + " Excel编码：" + uniqueExcelCodes[i]);alert("第 " + number + " 行，险种组合编码 " + uniqueExcelCodes[i] + " <br>" + msg);break;}}}console.log("Ln 241 Table 验证完毕");if (isContinue) {console.log("Ln 243 Table 准备赋值");$('#gridTable tr').each(function (rowIndex) {if (rowIndex > 0) {$(this).find('td').each(function (columnIndex) {if (rowIndex > 0 && columnIndex > 1 && columnIndex <= 7) {var columnName = "";if (rowIndex > 0 && columnIndex > 3 && columnIndex <= 7) {var code = $('tr:eq(' + rowIndex + ') td:eq(2)').text();console.log("Ln 251：第 " + rowIndex + " 行，编码：" + code);var objItem = jsonData.filter(function (x) {return x.险种组合编码 == code;});if (objItem == '' || objItem == undefined || objItem == null) {alert(code + " " + msg);return false;}var item = objItem[0];var itemString = JSON.stringify(item).replace("手续费率%", "CounterRate").replace("劳务费率%", "ServiceRate").replace("政府补助费率%", "AgentRate").replace("服务费率%", "CoverRate")item = jQuery.parseJSON(itemString);console.log("Ln 267：" + JSON.stringify(item));console.log(item);if (columnIndex == 4) {columnName = '手续费率%';$('tr:eq(' + rowIndex + ') td:eq(4) input').val(item.CounterRate);}else if (columnIndex == 5) {columnName = '劳务费率%';$('tr:eq(' + rowIndex + ') td:eq(5) input').val(item.ServiceRate);}else if (columnIndex == 6) {columnName = '政府补助费率%';$('tr:eq(' + rowIndex + ') td:eq(6) input').val(item.AgentRate);}else if (columnIndex == 7) {columnName = '服务费率%';$('tr:eq(' + rowIndex + ') td:eq(7) input').val(item.CoverRate);}}}});}});}}}};reader.readAsArrayBuffer(file); // 以 ArrayBuffer 形式读取文件内容$('#fileInput').prop("disabled", true);$('#fileInput').val(''); // 清空值$('#fileInput').prop('disabled', false);});});function importPolicy() {$('#fileInput').click();}</script>
</head>
<body><input type="button" id="btnRead" value="导入Excel" onclick="importPolicy()" /><input type="file" id="fileInput" style="display:none;" /><br /><table id="gridTable" border="1"><tr><td>序号</td><td>姓名</td><td>编号</td><td>电话</td><td>手续费率%</td><td>劳务费率%</td><td>政府补助费率%</td><td>服务费率%</td></tr><tr><td>1</td><td>张三</td><td>2859</td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td></tr><!--<tr><td>2</td><td>李四</td><td>2858</td><td><input type="text" value="13012345602" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td></tr><tr><td>3</td><td>王五</td><td>2587</td><td><input type="text" value="13012345603" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td><td><input type="text" value="13012345601" /></td></tr>--></table>
</body>
</html>*
*
*
相关文章：
Html页面Table表格导出导入Excel文件 xlsx.full
Html页面Table表格导出Excel文件 引用 xlsx.full.min.js 文件 导出 <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title></title><script src"https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.j…...
【资料分享】瑞芯微RK3576，8核2.2GHz+6T算力NPU工业核心板说明书
核心板简介 创龙科技SOM-TL3576-S是一款基于瑞芯微RK3576J/RK3576高性能处理器设计的4核ARM Cor...
埃隆·马斯克如何通过开源创新塑造未来
李升伟 编译 埃隆马斯克的名字在多个行业回响——从电动汽车、太空探索到人工智能及更多领域。虽然许多人关注他革命性的公司（如特斯拉、SpaceX、Neuralink和The Boring Company），但较少有人意识到他在开源软件运动中悄然却深远的影响力。本…...
ALOPS智能化运维管理平台
AIOps（Artificial Intelligence for IT Operations）即智能运维，是将人工智能技术应用于 IT 运维管理领域，以实现自动化、智能化的运维决策和管理。以下是关于 AIOps 的详细介绍： 核心能力 数据收集与整合：…...
Hadoop文件操作指南：深入解析文件操作
1 Hadoop文件系统概述 Hadoop分布式文件系统(HDFS)是Hadoop生态的核心存储组件，专为大规模数据集设计，具有高容错性和高吞吐量特性。 HDFS核心特性: 分布式存储：文件被分割成块(默认128MB)分布存储多副本机制：每个块默认3副本&…...
使用Fortran读取HDF5数据
使用Fortran读取HDF5数据 下面我将介绍如何在Fortran中读取HDF5文件中的各种类型数组数据，包括一维数组、二维数组、元数组和变长数组。 准备工作 首先需要确保系统安装了HDF5库，并且在编译时链接了HDF5库。例如使用gfortran编译时： gfor…...
STM32 HAL库之EXTI示例代码
外部中断按键控制LED灯 在main.c中 HAL_Init(); 初始化Flash，中断优先级以及HAL_MspInit函数，也就是 stm32f1xx_hal.c 中 HAL_StatusTypeDef HAL_Init(void) {/* Configure Flash prefetch */ #if (PREFETCH_ENABLE ! 0) #if defined(STM32F101x6) || …...
通过C#将GB18030编码转义为UTF-8
使用C#代码，对于GB18030编码转义为UTF-8格式。 using System.Text;public class FileEncodingConverter {// 支持转换的文件扩展名列表（可根据需求扩展）private static readonly string[] SupportedExtensions { ".sln", ".…...
《TCP/IP网络编程》学习笔记 | Chapter 23：IOCP
《TCP/IP网络编程》学习笔记 | Chapter 23：IOCP 《TCP/IP网络编程》学习笔记 | Chapter 23：IOCP通过重叠 I/O 理解 IOCPepoll 和 IOCP 的性能比较实现非阻塞模式的套接字以纯重叠 I/O 方式实现回声服务器端重新实现客户端测试从重叠 I/O 模型到 IOCP 模型…...
Java学习打卡-Day25-注解和反射、Class类
注解（JDK5引入） 什么是注解？ Java注解（Annotation），也叫元数据。一种代码级别的说明，与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面…...
电感、互感器、变压器和磁珠综合对比——《器件手册--电感/线圈/变压器/磁珠篇》
三、电感/线圈/变压器/磁珠 名称 定义 特点...
CAD导入arcgis中保持面积不变的方法
1、加载CAD数据，选择面数据，如下： 2、加载进来后，右键导出数据，导出成面shp数据，如下： 3、选择存储路径，导出面后计算面积，如下： 4、与CAD中的闭合线面积核对…...
rustdesk自建服务器怎么填写客户端配置信息
目录 # id、api、中继都怎么填？rustdesk程序启动后服务不自动启动 # id、api、中继都怎么填？ rustdesk程序启动后服务不自动启动 完全退出RudtDesk程序（右下角托盘区有的话，需要右键点退出） 创建windows服务ÿ…...
c++进阶之----智能指针
1.概念 在 C 中，智能指针是一种特殊的指针类型，它封装了裸指针（raw pointer）的行为，并通过 RAII（Resource Acquisition Is Initialization，资源获取即初始化）机制自动管理动态分配的…...
六、测试分类
设计测试用例 万能公式：功能测试性能测试界面测试兼容性测试安全性测试易用性测试 弱网测试：fiddler上行速率和下行速率 安装卸载测试 在工作中： 1.基于需求文档来设计测试用例（粗粒度） 输入字段长度为6~15位 功…...
Apollo源码总结
官方课程 项目源码 源码库简介： 1.apollo：算法库 2.apollo-kernel：改进LINUX内核。添加实时性补丁。 3. apollo-platform：改进ROS系统。去中心化，增加共享内存通信方式，兼容protobuf。 4.apollo-contrib&am…...
电感详解：定义、作用、分类与使用要点
一、电感的基本定义 电感（Inductor） 是由导线绕制而成的储能元件，其核心特性是阻碍电流变化，将电能转化为磁能存储。 基本公式： 自感电动势： E -L * (di/dt) （L：电感值，…...
AI编程案例拆解|基于机器学习XX评分系统-前端篇
文章目录 1. 定价使用DeepSeek估价小红书调研 2. 确定工作事项利用DeepSeek生成具体工作事项 3. 和客户沟通约会议沟通确定内容样式 4. 前端部分设计使用DeepSeek生成UI设计在Cursor中生成并提问前置条件开始编程 关注不迷路，励志拆解100个AI编程、AI智能体的落地应…...
java数组06：Arrays类
Arrays类 数组的工具类java.util. Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中是了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作。 查看JDK帮助文档 Arrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用…...
TQTT_KU5P开发板教程---实现流水灯
文档实现功能介绍 本文档是学习本开发板的基础，通过设置计数器使led0到led7依次闪烁，让用户初步认识vivado基本的开发流程以及熟悉项目的创建。本开发板的所有教程所使用的软件都是vivado2024.1版本的。可以根据网上的教程下载与安装。 硬件资源 此次教程…...
Model Context Protocol（MCP）模型上下文协议
Model Context Protocol（MCP）模型上下文协议 前言一、什么是MCP二、MCP的作用三、MCP与Function call对比四、构建一个简单的MCP DEMO环境准备实现MCP Server运行 ServerMCP Client端配置验证 总结 前言 在Agent时代，将Agent确立为大模型未来…...
第十二章：FreeRTOS多任务创建与删除
FreeRTOS多任务创建与删除教程 概述 本教程介绍FreeRTOS多任务的创建与删除方法，主要涉及两个核心函数： 任务创建：xTaskCreate()任务删除：vTaskDelete() 实践步骤 1. 准备工程文件 复制005工程并重命名为006 2. 创建多个任务…...
Seed-Thinking-v1.5：字节豆包新推理模型发布，200B参数战胜Deepseek
摘要 本文引入了Seed-Thinking-v1.5，能够在响应之前通过思考进行推理，从而提高了各种基准测试的性能。Seed-Thinking-v1.5在AIME 2024上获得86.7分，在Codeforces上获得55.0分，在GPQA上获得77.3分，展示了优秀的STEM和编…...
C#.NET模拟用户点击按钮button1.PerformClick自动化测试
PerformClick英文词是什么意思,几个词组成 PerformClick 是一个由两个英文单词组成的合成词，下面为你分别解释每个部分的含义以及整个词在编程语境中的意义： 单个单词含义 Perform：它是一个动词，读音为 /pəˈfɔːm/ÿ…...
微服务之间调用外键“翻译”的方法概述
写在前面的话：减少strean流操作，减少多层嵌套for循环。使用普通for循环和map的方式进行转换， 第一步查询数据 List<Student> findList studentDao.findList(findMap); 第二步准备遍历和赋值 if(CollectionUtil.isNotEmpty(findLis…...
AIDD-人工智能药物设计-提升分子预测反事实解释可靠性
UQ 过滤：提升分子预测反事实解释可靠性 目录 I-INF 指标结合 F1 评分，为评估大分子复合物（包括 RNA-蛋白质）的界面相互作用网络提供了可靠且全面的新方法。通过使用生成的人工 CAR 序列微调蛋白质语言模型（PLM），显著提高了 CAR-T 细胞活性的预测准确性，有效克服了合成蛋…...
软件界面设计：打造用户喜爱的交互体验
在数字化飞速发展的当下，软件已渗透进生活的各个角落，从日常使用的社交、购物软件，到专业领域的办公、设计软件，其重要性不言而喻。而软件界面作为用户与软件交互的桥梁，直接决定了用户对软件的第一印象与使用体验。出…...
【前端】webpack一本通
今日更新完毕，不定期补充，建议关注收藏点赞。 目录 简介使用webpack默认只能处理js文件 ->引入加载器对JS语法降级，兼容低版本语法合并文件再次打包进阶 工作原理html-webpack-plugin插件webpack开发服务器引入使用webpack-dev-server模块…...
代码学习总结（一）
代码学习总结（一） 这个系列的博客是记录下自己学习代码的历程，有来自平台上的，有来自笔试题回忆的，主要基于 C 语言，包括题目内容，代码实现，思路，并会注明题目难度&…...
DeepSeek在应急救援领域的应用解决方案
DeepSeek在应急救援领域的应用解决方案 一、引言 1.1 应急救援领域现状 近年来，我国应急管理工作全面加强，取得了显著成效。然而，一系列重特大灾害事故暴露出我国应急管理体系存在诸多问题短板。例如，在责任落实、应急处突、法…...