js文件导出功能

效果图:

代码示例:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>html 表格导出道</title><script src="js/jquery-3.6.3.js"></script><style>* {padding: 0;margin: 0;}.content {overflow: auto;width: 100%;height: 200px;/* 固定高度 */border-bottom: 0;border-right: 0;/* position: relative; */}table {border-collapse: separate;table-layout: fixed;width: 150%;/* 固定宽度 */}th {font-size: 16px;color: #909399;background-color: #FFF;}td {font-size: 12px;background-color: #FFF;color: #404144;}td,th {border: 1px solid #f0f0f0;box-sizing: border-box;height: 30px;text-align: center;}/* 固定左边 *//* 选择列表中的偶数标签:nth-child(2n) *//* nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关 */td:nth-child(1),th:nth-child(1) {position: sticky;left: 0;/* 首行在左 */z-index: 1;background-color: #fff;}td:nth-child(2),th:nth-child(2) {position: sticky;left: 100px;/* 首行在左 */z-index: 1;background-color: #fff;}td:nth-child(3),th:nth-child(3) {position: sticky;left: 200px;/* 首行在左 */z-index: 1;background-color: #fff;}/* 右侧 */td:nth-child(20),th:nth-child(20) {position: sticky;right: 0px;z-index: 1;background-color: #fff;}/* 上 */thead tr th {position: sticky;top: 0px;}/* 表头固定 */th:nth-child(1),th:nth-child(2),th:nth-child(3),th:nth-child(20) {z-index: 2;background-color: #fff;}</style><script language="JavaScript" type="text/javascript">//第五种方法var idTmr;function getExplorer() {var explorer = window.navigator.userAgent ;//ieif (explorer.indexOf("MSIE") >= 0) {return 'ie';}//firefoxelse if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if(explorer.indexOf("Chrome") >= 0){return 'Chrome';}//Operaelse if(explorer.indexOf("Opera") >= 0){return 'Opera';}//Safarielse if(explorer.indexOf("Safari") >= 0){return 'Safari';}}function method5(tableid) {if(getExplorer()=='ie'){var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject("Excel.Application");var oWB = oXL.Workbooks.Add();var xlsheet = oWB.Worksheets(1);var sel = document.body.createTextRange();sel.moveToElementText(curTbl);sel.select();sel.execCommand("Copy");xlsheet.Paste();oXL.Visible = true;try {var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");} catch (e) {print("Nested catch caught " + e);} finally {oWB.SaveAs(fname);oWB.Close(savechanges = false);oXL.Quit();oXL = null;idTmr = window.setInterval("Cleanup();", 1);}}else{tableToExcel(tableid)}}function Cleanup() {window.clearInterval(idTmr);CollectGarbage();}var tableToExcel = (function() {var uri = 'data:application/vnd.ms-excel;base64,',template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },format = function(s, c) {return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; }) }return function(table, name) {if (!table.nodeType) table = document.getElementById(table)var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}window.location.href = uri + base64(format(template, ctx))}})()function fu(){
let k=6;let str = '';for (let i = 0; i < k; i++) {str += `<tr><td style="width: 50px;"><input type="checkbox" class="check_all"onclick=fun(${i}) ></td><td>Yq</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>更多</td></tr>`;}$('tbody').html(str);
}// 在DOM准备好后调用函数fu
$(document).ready(function() {fu();
});
function fun(ss){let kos=[];kk.push(i)// 检查是否已存在相同的项目let found = kos.some(item => item.path === path); // 根据需要修改判断条件,这里以path为例if (!found) {kos.push(ss);}kos.length=k;
}</script>
</head>
<body>
<div ><button type="button" onclick="method5('tableExcel')">导出Excel方法五</button>
</div>
<div class="content"><table id="tableExcel" cellspacing="0" cellpadding="0"><thead><tr> <th style="width: 50px;"><input type="checkbox" id="check_all"></th><th style="width: 100px;">姓名</th><th style="width: 100px;">岗位工资</th><th style="width: 100px;">岗位档级</th><th style="width: 3%;">性别</th><th style="width: 7%;">生日</th><th style="width: 7%;">手机号</th><th style="width: 12%;">身份证号</th><th style="width: 5%;">项目名称</th><th style="width: 10%;">公司名称</th><th style="width: 5%;">政治面貌</th><th style="width: 5%;">籍贯</th><th style="width: 5%;">学历</th><th style="width: 7%;">创建时间</th><th style="width: 5%;">员工状态</th><th style="width: 4%;">用工形式</th><th style="width: 7%;">现合同到期时间</th><th style="width: 7%;">现合同期限</th><th style="width: 15%;">银行卡号</th><th style="width: 15%;">工资卡开户行</th><th style="width:5%;">操作</th></tr></thead><!-- 内容 --><tbody><tr><td>Yq</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>更多</td></tr></tbody></table></div>
</body>
</html>

 这只是我个人总结的方法还可以用其他方法希望可以帮到大家

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

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

相关文章

LoRA用于高效微调的基本原理

Using LoRA for efficient fine-tuning: Fundamental principles — ROCm Blogs (amd.com) 大型语言模型的低秩适配&#xff08;LoRA&#xff09;用于解决微调大型语言模型&#xff08;LLMs&#xff09;的挑战。GPT和Llama等拥有数十亿参数的模型&#xff0c;特定任务或领域的微…

【因果推断python】44_评估因果模型2

目录 累积弹性曲线 累积增益曲线 考虑差异 关键思想 累积弹性曲线 再次考虑将价格转换为二元处理的说明性示例。我们会从我们离开的地方拿走它&#xff0c;所以我们有弹性处理带。我们接下来可以做的是根据乐队的敏感程度对乐队进行排序。也就是说&#xff0c;我们把最敏感…

韩顺平0基础学java——第26天

p523-547 HashSet扩容时&#xff0c;只要节点到达了阈值就会扩&#xff0c;而不是数组长度到了才扩。 比如长16的数组&#xff0c;索引1放了8个&#xff0c;索引3放了4个&#xff0c;我再加一个他就会扩容。 另外谁能告诉我老师的debug界面是怎么设置的吗忘光了 HashSet存放…

基于Spring+Vue的前后端分离的计算器

麻雀虽小&#xff0c;五脏俱全 该项目已部署上线&#xff1a;http://calculator.wushf.top/ 并通过Gitee Go流水线实现持续部署。 需求分析 表达式求值 支持加减乘除四则运算、支持高精度 获取日志 Api文档定义 前后端分离&#xff0c;人不分离 通过Apifox定义接口细节&#…

(el-Transfer)操作(不使用 ts):Element-plus 中 Select 组件动态设置 options 值需求的解决过程

Ⅰ、Element-plus 提供的Select选择器组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供Select组件情况&#xff1a; 其一、Element-ui 自提供的Select代码情况为(示例的代码)&#xff1a; // Element-plus 提供的组件代码: <template><div class"f…

闹大了!高考作文“人工智能与AI”引发争议,专家喊话,部分考生家长无奈,直呼:“太不公平了!这哪里是考作文,分明是在考城乡差距啊!”

闹大了&#xff01;高考作文“人工智能与AI”引发争议&#xff0c;专家喊话&#xff0c;部分考生家长无奈&#xff0c;直呼&#xff1a;“太不公平了&#xff01;这哪里是考作文&#xff0c;分明是在考城乡差距啊&#xff01;” ​高考&#xff0c;本该是最公平的战场&#xff…

IO流2.

字符流-->字符流的底层其实就是字节流 public class Stream {public static void main(String[] args) throws IOException {//1.创建对象并关联本地文件FileReader frnew FileReader("abc\\a.txt");//2.读取资源read()int ch;while((chfr.read())!-1){System.out…

MySQL系列-语法说明以及基本操作(一)

1、前言 主要讲解MySQL的基本语法 官网文档 https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html 关于MySQL的基本语法&#xff0c;关于数据类型、表的操作、数据操作、事务、备份等&#xff0c;可参考 http://www.voidme.com/mysql 2、数据类型 数…

多环境镜像晋级/复用最佳实践

作者&#xff1a;木烟 本文主要介绍镜像构建部署场景&#xff0c;多环境镜像晋级/复用最佳实践&#xff0c;保证“所发即所测”。 场景介绍 应用研发场景有效地管理镜像产物是确保软件快速、安全、可靠部署的关键环节。通常一个应用研发需要经过测试、预发、生产各个阶段&am…

PHP转Go系列 | 变量常量的使用姿势

大家好&#xff0c;我是码农先森。 变量 在 PHP 语言中&#xff0c;初始化变量虽然只有一行&#xff0c;其实包含了两步&#xff0c;一是声明变量&#xff0c;二是赋值给变量&#xff0c;同一个变量可以任意再赋值任何类型的数据。 <?php// 初始化变量 $name "man…

防爆气象仪的工作原理

TH-WFB5矿山气象传感器在矿山安全监测系统中扮演着至关重要的角色&#xff0c;它们能够及时发现异常情况&#xff0c;为矿山的安全运营提供可靠的数据支持。矿山气象传感器能够实时监测矿山环境中的风速、风向、温度、湿度和大气压力等关键气象参数。这些传感器采用先进的传感技…

网页五子棋对战项目测试(selenium+Junit5)

目录 网页五子棋对战项目介绍 网页五子棋对战测试的思维导图​ 网页五子棋对战的UI自动化测试 测试一&#xff1a;测试注册界面 测试二&#xff1a;测试登陆界面 测试三&#xff1a;测试游戏大厅界面 测试四&#xff1a;测试游戏房间界面以及观战房间界面 测试五&#…

之所以选择天津工业大学,因为它是双一流、报考难度适宜,性价比高!天津工业大学计算机考研考情分析!

天津工业大学&#xff08;Tiangong University&#xff09;&#xff0c;简称“天工大”&#xff0c;位于天津市&#xff0c;是教育部与天津市共建高校、国家国防科技工业局和天津市共建的天津市重点建设高校、国家“双一流”建设高校、天津市高水平特色大学建设高校、中国研究生…

多态性(Java)

本篇学习面向对象语言的第三个特性——多态。 目录 1、多态的概念 2、继承多态实现条件 3、重写 4、重新与重载的区别&#xff1a; 5、向上转移和向下转型 5、1向上转型&#xff1a; 5、2 向下转型 1、多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态…

从零开始! Jupyter Notebook的安装教程

&#x1f680; 从零开始! Jupyter Notebook的安装教程 摘要 &#x1f4c4; Jupyter Notebook 是一个广受欢迎的开源工具&#xff0c;特别适合数据科学和机器学习的开发者使用。本文将详细介绍从零开始安装 Jupyter Notebook 的步骤&#xff0c;包括各种操作系统的安装方法&am…

从钉钉到跨境电商领域的技术演变,HHO如何通过NineData实现全球化业务布局

两氢一氧&#xff08;HHO&#xff09;是一家跨境出海电商平台&#xff0c;专注于通过数字化手段连接全球市场和中国优质供应链&#xff0c;致力于打造数字化时代的全球化新品牌。 创始人陈航&#xff0c;曾任钉钉 CEO 并成功打造行业领先的亿级活跃用户产品--钉钉。离开阿里后创…

Game-Fi 新贵 MetaArena 项目全解析:重塑区块链游戏生态

在区块链技术迅猛发展的浪潮中&#xff0c;全球各行业都在探索如何利用这一革命性技术来提升效率、降低成本&#xff0c;并创造新的商业模式。游戏行业作为数字娱乐的核心领域之一&#xff0c;也在经历前所未有的变革。尽管传统游戏巨头如Steam和任天堂已推出Web3元宇宙游戏产品…

Ceph入门到精通-ceph边缘集群你听说过嘛?

边缘集群是一种经济高效的对象存储配置解决方案。 Red Hat 支持以下 Red Hat Ceph Storage 集群的最低配置: 具有两个 SSD 副本的三节点集群。 具有三个 HDD 副本的四节点群集。 具有 EC 池的四节点集群,具有 2+2 配置。 对于较小的群集,由于使用量和复原能力的损失,利用率…

13.2 Go 接口的动态性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

RK3588 代码中导入torch报错

RK3588 代码中导入torch报错 使用RK3588测试官方的YOLOv8,出现下面的问题 发现是dfl函数中导入torch的时候产生的&#xff0c;但是我在python终端上执行导入torch并没有发生报错 Traceback (most recent call last):File "infer.py", line 243, in <module>b…