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，一经查实，立即删除！

相关文章

AI学习指南机器学习篇-K-最近邻算法（KNN）简介

AI学习指南机器学习篇-K-最近邻算法（KNN）简介

AI学习指南机器学习篇-K-最近邻算法&#xff08;KNN&#xff09;简介 机器学习是人工智能的重要分支&#xff0c;它的发展推动了人工智能技术的迅猛进步。而在机器学习领域&#xff0c;K-最近邻算法&#xff08;KNN&#xff09;是一种简单而有效的算法&#xff0c;它在分类和回…
阅读更多...
18个机器学习核心算法模型总结

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

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

Python面试题-4

61. 如何在Python中实现字符串过滤&#xff1f; 在Python中&#xff0c;你可以使用多种方法对字符串进行过滤。其中&#xff0c;最常用的是使用列表推导式&#xff08;list comprehension&#xff09;或者内置的filter()函数。 使用列表推导式过滤字符串 列表推导式是一种简…
阅读更多...
面试篇-求两个有序数组的交集

面试篇-求两个有序数组的交集

题目 两个有序数组&#xff0c;第一个有序数组m是1000w个元素&#xff0c;第二个有序数组n是1000个元素&#xff0c;求交集&#xff0c;需要考虑时间复杂度和空间复杂度。 解题思路 解法1&#xff1a;遍历小数组n&#xff0c;在m数组中进行折半查找&#xff0c;根据数组有序…
阅读更多...
pinia

pinia

vuex的替代者&#xff0c;&#xff0c;可以使用组合式api&#xff0c;&#xff0c;像写每个组件一样&#xff0c;&#xff0c;&#xff0c;没有了之前vuex中mutation&#xff0c;&#xff0c;一个defineStore就是一个模块&#xff0c;&#xff0c;直接引用使用即可&#xff0c;…
阅读更多...
定义子组件的ref类型

定义子组件的ref类型

在我们定义子组件时给他一个ref为rightWrapRef,那么我们怎么定义它的数据类型呢&#xff1f; <RightWrap ref"rightWrapRef" :varietyOpenedList"varietyOpenedList"></RightWrap> 定义如下&#xff1a;InstanceType<typeof RightWrap>…
阅读更多...
AIGC文生图PixArt-Sigma使用

AIGC文生图PixArt-Sigma使用

参考：https://huggingface.co/PixArt-alpha/PixArt-Sigma-XL-2-1024-MS 下载： export HF_ENDPOINT=https://hf-mirror.comhuggingface-cli download --resume-download --local-dir-use-symlinks False PixArt-alpha/PixArt-Sigma-XL-2-1024
阅读更多...
LabVIEW版本、硬件驱动和Windows版本之间兼容性

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

在LabVIEW应用开发和部署过程中&#xff0c;确保LabVIEW版本、硬件驱动和Windows版本之间的一致性和兼容性至关重要。这不仅影响程序的稳定性和性能&#xff0c;还关系到项目的成功实施。本文从多角度详细分析这些因素之间的兼容性问题&#xff0c;并提供相关建议。 兼容性考虑…
阅读更多...
使用 `select` 实现文件描述符监控的深入解析与示例

使用 `select` 实现文件描述符监控的深入解析与示例

文章目录 0. 概述1. select 函数概述2. 普通文件描述符的 select 行为3. 监控普通文件描述符的实际应用3.1 C 代码示例3.2 使用 stat 函数监控文件修改时间 结论 0. 概述 在编程中&#xff0c;select 函数可以用于监控多个文件描述符&#xff08;包括 socket、串口和普通文件&…
阅读更多...
【尚庭公寓SpringBoot + Vue 项目实战】登录管理（十八）

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

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

Memcached原理及使用详解

文章目录 Memcached原理1. 内存存储2. 分布式缓存3. 键值对存储4. 过期策略5. 淘汰策略 Memcached的优缺点优点1. 高性能2. 分布式缓存3. 简单的键值对存储4. 可扩展性5. 灵活性 缺点1. 数据持久化问题2. 安全性问题3. 内存限制4. 依赖外部存储5. 缺乏复杂查询支持 Memcached使…
阅读更多...
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…
阅读更多...
微信小程序学习（八）：behaviors代码复用

微信小程序学习（八）：behaviors代码复用

小程序的 behaviors 方法是一种代码复用的方式&#xff0c;可以将一些通用的逻辑和方法提取出来&#xff0c;然后在多个组件中复用&#xff0c;从而减少代码冗余&#xff0c;提高代码的可维护性。 如果需要 behavior 复用代码&#xff0c;需要使用 Behavior() 方法&#xff0c…
阅读更多...
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 …
阅读更多...
避免在使用Element-UI el-form时的resetFields陷阱

避免在使用Element-UI el-form时的resetFields陷阱

避免在使用Element-UI el-form时的resetFields陷阱 在使用Vue.js结合Element-UI开发表单时&#xff0c;el-form的resetFields方法是一个常用的功能&#xff0c;用于重置表单项到初始状态。然而&#xff0c;这个方法在某些情况下可能导致一些不易察觉的问题。本文将分享一个实际…
阅读更多...
第二十九章 使用 MTOM 进行附件 - Web 服务和 Web 客户端的默认行为

第二十九章 使用 MTOM 进行附件 - Web 服务和 Web 客户端的默认行为

文章目录 第二十九章 使用 MTOM 进行附件 - Web 服务和 Web 客户端的默认行为Web 服务和 Web 客户端的默认行为强制响应为 MTOM 包对 WSDL 的影响 强制请求作为 MTOM 包对 WSDL 的影响 第二十九章 使用 MTOM 进行附件 - Web 服务和 Web 客户端的默认行为 Web 服务和 Web 客户端…
阅读更多...
智慧校园发展趋势：2024年及未来教育科技展望

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

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

密钥管理简介

首先我们要知道什么是密钥管理&#xff1f; 密钥管理是一种涉及生成、存储、使用和更新密钥的过程。 密钥的种类 我们知道&#xff0c;对称密码主要包括分组密码和序列密码。但有时也可以将杂凑函数和消息认证码划分为这一类&#xff0c;将它们的密钥称为对称密钥&#xff1b;…
阅读更多...
Clickhouse监控_使用Prometheus+Grafana来监控Clickhouse服务和性能指标

Clickhouse监控_使用Prometheus+Grafana来监控Clickhouse服务和性能指标

官方文档https://clickhouse.com/docs/zh/operations/monitoring 建议使用PrometheusGrafana组合监控Clickhouse服务和性能指标 1、把prometheus的clickhouse_exporter下载到Clickhouse服务器&#xff0c;查找prometheus的clickhouse_exporter参见https://prometheus.io/docs…
阅读更多...
最新文章

Copyright @ 2022~2023