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>这只是我个人总结的方法还可以用其他方法希望可以帮到大家
相关文章：
js文件导出功能
效果图： 代码示例： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>html 表格导出道</title><script src"js/jquery-3.6.3.js"></script><st…...
PHP转Go系列 | 字符串的使用姿势
大家好，我是码农先森。 输出 在 PHP 语言中的输出比较简单，直接使用 echo 就可以。此外，在 PHP 中还有一个格式化输出函数 sprintf 可以用占位符替换字符串。 <?phpecho 码农先森; echo sprintf(码农:%s, 先森);在 Go 语言中调用它的输…...
vue关于:deep穿透样式的理解
情况一 子组件： <div class"child"><div class"test_class">test_class<div class"test1">test1<div class"test2">test2</div></div></div></div>父组件： …...
算法 |数字计数
给出n个数字,请你求出在给出的这n个数字当中,最大的数字与次大的数字之差,最大的数字与次小的数字之差,次大的数字与次小的数字之差,次大的数字与最小的数字之差. 易错点 1 1 2 3 4 4 次小不是a[1]了 次大也不是a[n-2]了 #include<bits/stdc.h> using namespace std; …...
通义千问调用笔记
如何使用通义千问API_模型服务灵积(DashScope)-阿里云帮助中心 package com.ruoyi.webapp.utils;import com.alibaba.dashscope.aigc.generation.Generation; import com.alibaba.dashscope.aigc.generation.GenerationOutput; import com.alibaba.dashscope.aigc.generation.G…...
Linux常见的压缩文件种类与对应的压缩解压方法
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…...
LNMP网站架构
一、安装nginx服务 1、关闭防火墙和核心防护 systemctl stop firewalld systemctl disable firewalld setenforce 0 2、安装依赖包 yum -y install pcre-devel zlib-devel openssl-devel gcc gcc-c make 3、创建运行用户 useradd -M -s /sbin/nologin nginx 4、编译安装…...
排序算法及源代码
堆排序： 在学习堆之后我们知道了大堆和小堆，对于大堆而言第一个节点就是对大值，对于小堆而言，第一个值就是最小的值。如果我们把第一个值与最后一个值交换再对最后一个值前面的数据重新建堆，如此下去就可以实现建堆排…...
力扣第206题“反转链表”
在本篇文章中，我们将详细解读力扣第206题“反转链表”。通过学习本篇文章，读者将掌握如何使用迭代和递归的方法来解决这一问题，并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释，以便于理解。 问题描述 力扣第…...
多模态大模型解读
目录 1. CLIP 2. ALBEF 3. BLIP 4. BLIP2 参考文献 （2023年）视觉语言的多模态大模型的目前主流方法是：借助预训练好的LLM和图像编码器，用一个图文特征对齐模块来连接，从而让语言模型理解图像特征并进行深层次的问…...
React是什么？
theme: condensed-night-purple highlight: atelier-cave-light React是什么？ 官方的解释是：A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库 那为什么要选择用React呢？ 原生的HTML、CSS、JavaScrip的…...
创新入门 | 病毒循环Viral Loop是什么？为何能实现指数增长
今天，很多高速增长的成功创业公司都在采用”病毒循环“的策略去快速传播、并扩大用户基础。究竟什么是“病毒循环”？初创公司的创始人为何需要重视这个策略？这篇文章中将会一一解答与病毒循环有关的各种问题。 一、什么是病毒循环（…...
鸿蒙HarmonyOS实战：渲染控制、路由案例
条件渲染 简单来说，就是动态控制组件的显示与隐藏，类似于vue中的v-if 但是这里写法就是用if、else、else if看起来更像是原生的感觉 效果 循环渲染 我们实际开发中，数据一般是后端返回来的对象格式，对此我们需要进行遍历&#…...
【Linux】进程控制2——进程等待（waitwaitpid）
1. 进程等待必要性 我们知道，子进程退出，父进程如果不管不顾，就可能造成"僵尸进程”的问题，进而造成内存泄漏。另外，进程一旦变成僵尸状态，那就刀枪不入，“杀人不眨眼”的kill -9 也无能为…...
SpringBoot 统计接口调用耗时的多种方式
在实际开发中，了解项目中接口的响应时间是必不可少的事情。SpringBoot 项目支持监听接口的功能也不止一个，接下来我们分别以 AOP、ApplicationListener、Tomcat 三个方面去实现三种不同的监听接口响应时间的操作。 AOP 首先我们在项目中创建一个类 &am…...
Linux系统安装Ruby语言
Ruby是一种面向对象的脚本语言，由日本的计算机科学家松本行弘设计并开发，Ruby的设计哲学强调程序员的幸福感，致力于简化编程的复杂性，并提供一种既强大又易于使用的工具。其语法简洁优雅，易于阅读和书写，使…...
网络安全练气篇——OWASP TOP 10
1、什么是OWASP？ OWASP（开放式Web应用程序安全项目）是一个开放的社区，由非营利组织 OWASP基金会支持的项目。对所有致力于改进应用程序安全的人士开放，旨在提高对应用程序安全性的认识。 其最具权威的就是“10项最严重…...
python实现进度条的方法和实现代码
在Python中，有多种方式可以实现进度条。这里，我将介绍七种常见的方法：使用tqdm（这是一个外部库，非常流行且易于使用）、rich、click、progressbar2等库以及纯Python的print函数与time库来模拟进度条。 目录…...
被拷打已老实！面试官问我 #{} 和 ${} 的区别是什么？
引言：在使用 MyBatis 进行数据库操作时，#{} 和 ${} 的区别是面试中常见的问题，对理解如何在 MyBatis 中安全有效地处理 SQL 语句至关重要。正确使用这两种占位符不仅影响应用的安全性，还涉及到性能优化。 题目 被拷打已老实&…...
C# —— while循环语句
作用 让顺序执行的代码 可以停下来 循环执行某一代码块 // 条件分支语句: 让代码产生分支 进行执行 // 循环语句 : 让代码可以重复执行 语法 while循环 while (bool值) { 循环体(条件满足时执行的代码块) …...
Greasy Fork：用户脚本管理的一站式开源解决方案
Greasy Fork：用户脚本管理的一站式开源解决方案 【免费下载链接】greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork 从脚本新手到社区贡献者的进阶指南 一、功能探索：解锁浏览器增强新…...
S2-Pro提示词（Prompt）工程入门：从零到一掌握高效对话技巧
S2-Pro提示词（Prompt）工程入门：从零到一掌握高效对话技巧 1. 为什么需要学习提示词工程 你可能已经发现，同样的AI模型，在不同人手里表现天差地别。有人能让它写出专业报告，有人却只能得到敷衍的回复。这中…...
SEO_避开这些常见误区，让你的SEO效果翻倍
<h2>避开这些常见误区，让你的SEO效果翻倍</h2> <p>在当今的互联网时代，搜索引擎优化（SEO）已经成为了每个网站和博客运营者必须掌握的技能之一。许多人在进行SEO时却会犯一些常见的错误，这些错误不仅…...
LFM2.5-1.2B-Thinking部署教程：3步实现Python爬虫数据智能处理
LFM2.5-1.2B-Thinking部署教程：3步实现Python爬虫数据智能处理 1. 引言 你是不是经常遇到这样的问题：爬虫抓取了一大堆数据，但面对杂乱无章的文本内容却无从下手？手动整理不仅耗时耗力，还容易出错。现在，…...
LFM2.5-1.2B-Thinking-GGUF代码生成能力评测：对比Claude Code的轻量化替代方案
LFM2.5-1.2B-Thinking-GGUF代码生成能力评测：对比Claude Code的轻量化替代方案 1. 评测背景与模型特点 在当今AI辅助编程领域，大型语言模型已经成为开发者日常工作的得力助手。然而，许多高性能模型往往需要云端部署或强大的计算资源&#x…...
Ubuntu16.04服务器上从零部署LaneNet车道线检测：Tusimple数据集处理全流程避坑指南
Ubuntu 16.04服务器部署LaneNet车道线检测全流程实战 在自动驾驶和智能交通系统中，车道线检测是一项基础而关键的技术。本文将详细介绍如何在Ubuntu 16.04服务器环境下，从零开始部署LaneNet车道线检测模型，并处理Tusimple数据集的全流程。不同…...
bat脚本从入门到实战：10个常用技巧提升你的Windows自动化效率
BAT脚本从入门到实战：10个常用技巧提升你的Windows自动化效率 在Windows系统中，BAT批处理脚本就像一位不知疲倦的助手，能够24小时待命执行各种重复性任务。想象一下，每天上班第一件事是打开五个开发工具、三个文档和一个数据库客户…...
校园网免认证上网？手把手教你用UDP53端口搭建自己的“网络后门”（附服务器配置）
校园网络优化：UDP53端口的高效应用实践 校园网络作为师生日常学习生活的重要基础设施，其稳定性和访问效率直接影响着教学科研活动的开展。本文将深入探讨一种基于UDP53端口的网络优化方案，帮助技术爱好者理解并实现更流畅的网络体验。 1. 校园…...
NsEmuTools：开源模拟器管理工具的质量保障与工程实践
NsEmuTools：开源模拟器管理工具的质量保障与工程实践 【免费下载链接】ns-emu-tools 一个用于安装/更新 NS 模拟器的工具 项目地址: https://gitcode.com/gh_mirrors/ns/ns-emu-tools 在开源项目的生命周期中，如何在快速迭代与代码质量之间找到平…...
OpenClaw技能扩展指南：为GLM-4.7-Flash添加自定义功能
OpenClaw技能扩展指南：为GLM-4.7-Flash添加自定义功能 1. 为什么需要自定义技能 去年冬天，当我第一次尝试用OpenClaw自动整理电脑上的照片时，发现现有的技能库无法满足我的特殊需求——按照拍摄地点和人物自动分类。这让我意识到࿰…...