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.mzph.cn/news/855961.shtml

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

相关文章

18个机器学习核心算法模型总结

18个机器学习核心算法模型总结

最强总结&#xff01;18个机器学习核心算法模型&#xff01;&#xff01; 大家好~ 在学习机器学习之后&#xff0c;你认为最重要的算法模型有哪些&#xff1f; 今儿的内容涉及到~ 线性回归逻辑回归决策树支持向量机朴素贝叶斯K近邻算法聚类算法神经网络集成方法降维算法主成…
阅读更多...
LabVIEW版本、硬件驱动和Windows版本之间兼容性

LabVIEW版本、硬件驱动和Windows版本之间兼容性

在LabVIEW应用开发和部署过程中&#xff0c;确保LabVIEW版本、硬件驱动和Windows版本之间的一致性和兼容性至关重要。这不仅影响程序的稳定性和性能&#xff0c;还关系到项目的成功实施。本文从多角度详细分析这些因素之间的兼容性问题&#xff0c;并提供相关建议。 兼容性考虑…
阅读更多...
【尚庭公寓SpringBoot + Vue 项目实战】登录管理（十八）

【尚庭公寓SpringBoot + Vue 项目实战】登录管理（十八）

【尚庭公寓SpringBoot Vue 项目实战】登录管理&#xff08;十八&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】登录管理&#xff08;十八&#xff09;1、登录业务介绍2、接口开发2.1、获取图形验证码2.2、登录接口2.3、获取登录用户个人信息 1、登录业务介绍 登…
阅读更多...
SpringCloud Netflix和SpringCloud Alibaba核心组件

SpringCloud Netflix和SpringCloud Alibaba核心组件

1.SpringCloud Netflix组件 1.1 Netflix Eureka-服务注册发现 Eureka 是一种用于服务发现 的组件&#xff0c;它是一个基于 REST 的服务&#xff0c;用于定位运行在 AWS 弹性计算云&#xff08;EC2&#xff09;中的中间层服务&#xff0c;以便它们可以相互通讯。 注册&#xf…
阅读更多...
day14-226.翻转二叉树+101. 对称二叉树+104.二叉树的最大深度

day14-226.翻转二叉树+101. 对称二叉树+104.二叉树的最大深度

一、226.翻转二叉树 题目链接&#xff1a;https://leetcode.cn/problems/invert-binary-tree/ 文章讲解&#xff1a;https://programmercarl.com/0226.%E7%BF%BB%E8%BD%AC%E4%BA%8C%E5%8F%89%E6%A0%91.html#%E7%AE%97%E6%B3%95%E5%85%AC%E5%BC%80%E8%AF%BE 视频讲解&#xff1…
阅读更多...
C++ —— unordered_set、unordered_map的介绍及使用

C++ —— unordered_set、unordered_map的介绍及使用

目录 unordered系列关联式容器 unordered_set的介绍 unordered_set的使用 unordered_set的定义方式 unordered_set接口的使用 unordered_multiset unordered_map的介绍 unordered_map的使用 unordered_map的定义方式 unordered_map接口的使用 unordered_multimap …
阅读更多...
智慧校园发展趋势：2024年及未来教育科技展望

智慧校园发展趋势：2024年及未来教育科技展望

展望2024年及未来的教育科技领域&#xff0c;智慧校园的发展正引领着一场教育模式的深刻变革&#xff0c;其核心在于更深层次地融合技术与教育实践。随着人工智能技术的不断成熟&#xff0c;个性化学习将不再停留于表面&#xff0c;而是深入到每个学生的个性化需求之中。通过精…
阅读更多...
密钥管理简介

密钥管理简介

首先我们要知道什么是密钥管理&#xff1f; 密钥管理是一种涉及生成、存储、使用和更新密钥的过程。 密钥的种类 我们知道&#xff0c;对称密码主要包括分组密码和序列密码。但有时也可以将杂凑函数和消息认证码划分为这一类&#xff0c;将它们的密钥称为对称密钥&#xff1b;…
阅读更多...
白酒：酒文化的地域特色与差异

白酒：酒文化的地域特色与差异

中国的白酒文化&#xff0c;作为一种深深植根于人们生活中的文化现象&#xff0c;其发展历程深受地域特色的影响&#xff0c;从而形成了丰富多样的地域特色与差异。云仓酒庄的豪迈白酒&#xff0c;作为中国白酒的品牌&#xff0c;其背后所蕴含的地域特色与差异更是值得我们去探…
阅读更多...
在 Ubuntu 18.04.4 LTS上安装 netmap

在 Ubuntu 18.04.4 LTS上安装 netmap

文章目录 步骤运行配置文件编译安装使用netmap 步骤 sudo su sudo apt-get update sudo apt install build-essential sudo apt-get install -y git sudo apt-get install -y linux-headers-$(uname -r)rootVM-20-6-ubuntu:/home/ubuntu/netmap/LINUX# git clone https://gith…
阅读更多...
外观模式(大话设计模式)C/C++版本

外观模式(大话设计模式)C/C++版本

外观模式 C #include <iostream> using namespace std;class stock1 { public:void Sell(){cout << "股票1卖出" << endl;}void Buy(){cout << "股票1买入" << endl;} };class stock2 { public:void Sell(){cout << …
阅读更多...
el-cascader 支持多层级，多选（可自定义限制数量），保留最后一级

el-cascader 支持多层级，多选（可自定义限制数量），保留最后一级

多功能的 el-cascader 序言&#xff1a;最近遇到一个需求关于级联的&#xff0c;有点东西&#xff0c;这里是要获取某个产品类型下的产品&#xff0c;会存在产品类型和产品在同一级的情况&#xff0c;但是产品类型不能勾选&#xff1b; 情况1&#xff08;二级菜单是产品&…
阅读更多...
【mysql】排错和调优

【mysql】排错和调优

通用的一些排错方法。 1、查看进程信息 mysql> show full processlist;mysql> show processlist; 2、information_schema information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。…
阅读更多...
DDP算法之反向传播（Backward Pass）

DDP算法之反向传播（Backward Pass）

DDP算法反向传播 在DDP（Differential Dynamic Programming）算法中，反向传播（Backward Pass）是关键步骤之一。这个步骤的主要目的是通过动态规划递归地计算每个时间步上的值函数和控制策略，以便在前向传播（Forward Pass）中使用。 反向传播的目标 反向传播的主要目标是…
阅读更多...
AD层次原理图绘制

AD层次原理图绘制

一、在原理图中添加端口 二、添加层次图 三、更新层次图 四、也可以先画层次图&#xff0c;再绘制原理图&#xff0c;这里就不做演示了
阅读更多...
vue3+ts 使用vue3-ace-editor实现Json编辑器

vue3+ts 使用vue3-ace-editor实现Json编辑器

1、效果图 输入代码&#xff0c;点击格式化就出现以上效果&#xff0c;再点击压缩&#xff0c;是以下效果2、安装 npm i vue3-ace-editor 3、使用 新建aceConfig.js文件 // ace配置&#xff0c;使用动态加载来避免第一次加载开销 import ace from ace-builds// 导入不同的主…
阅读更多...
Attention Is All You Need论文地址

Attention Is All You Need论文地址

论文地址 点击即可
阅读更多...
快速定制新人入职，可以自动回答知识库问题的机器人 | Chatopera

快速定制新人入职，可以自动回答知识库问题的机器人 | Chatopera

定制智能对话机器人&#xff0c;比如我是 HR&#xff0c;想要做一个聊天机器人&#xff0c;帮助新人入职&#xff0c;自动回答知识库的问题。 注册 Chatopera 云服务 首先&#xff0c;您需要一个 Chatopera 云服务账户&#xff0c;然后根据下面四个步骤实现。 服务注册地址&…
阅读更多...
UnityAPI学习之碰撞检测与触发检测

UnityAPI学习之碰撞检测与触发检测

碰撞检测 发生碰撞检测的前提&#xff1a; 1. 碰撞的物体需要有Rigidbody组件和boxcllidder组件 2. 被碰撞的物体需要有boxcollider组件 示例1&#xff1a;被碰撞的物体拥有Rigidbody组件 两个物体会因为都具有刚体的组件而发生力的作用&#xff0c;如下图所示&#xff0c…
阅读更多...
创建一个electron桌面备忘录

创建一个electron桌面备忘录

Sound Of Silence 1.创建electron项目命令&#xff1a; npm create quick-start/electron my-new-project 2选择&#xff1a;√ Select a framework: vue √ Add TypeScript? ... No √ Add Electron updater plugin? ... Yes √ Enable Electron download mirror proxy? .…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023