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值) { 循环体(条件满足时执行的代码块) …...
Qwen3-ASR-0.6B惊艳效果：藏语、维吾尔语等少数民族语言识别案例
Qwen3-ASR-0.6B惊艳效果：藏语、维吾尔语等少数民族语言识别案例 1. 引言：多语言语音识别的突破 语音识别技术正在改变我们与设备交互的方式，但有一个领域一直存在巨大挑战——少数民族语言的识别。传统的语音识别模型往往只支持主流语言&am…...
OpenClaw自动化测试：Qwen3.5-9B执行Python脚本与结果校验
OpenClaw自动化测试：Qwen3.5-9B执行Python脚本与结果校验 1. 为什么选择OpenClaw做自动化测试？ 去年接手一个数据清洗工具链项目时，我遇到了一个典型痛点：每次代码更新后，都需要手动执行十几个测试用例，比…...
23种设计模式 - 组合模式（Composite）
组合模式（Composite）—— 文件夹套文件夹，统一操作 大白话解释 你的电脑里： 📄 文件（不能再包含东西）📁 文件夹（可以装文件，也可以装文件夹） &…...
玩转AI！用FastAPI+RAG轻松构建智能文档问答系统，代码、文档全公开！
在企业数字化转型的浪潮中，我们常遇到这样一个痛点：海量的业务文档、研究报告、技术手册堆积如山，当需要从中寻找某个特定答案时，员工往往要花费数小时甚至数天进行翻阅。这不仅是效率的浪费，更是知识资产沉睡的体现**…...
RWKV7-1.5B-g1a多场景落地：HR部门用它自动生成岗位JD要点与面试问题清单
RWKV7-1.5B-g1a多场景落地：HR部门用它自动生成岗位JD要点与面试问题清单 1. 为什么HR部门需要AI助手 招聘工作中有大量重复性文案工作，比如： 为不同岗位编写职位描述(JD)设计结构化面试问题整理岗位核心能力要求制作候选人评估标准 传统方…...
突破信息获取壁垒：智能内容解锁工具使用指南
突破信息获取壁垒：智能内容解锁工具使用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 你是否曾遇到这样的情况：一篇专业的技术文章、一份重要的研究报告…...
浙政钉应用监控埋点参数（bid, sapp_id）到底去哪找？一份给开发者的沟通指南
浙政钉应用监控埋点参数获取实战指南：从沟通到落地的全流程解析 在政务数字化进程中，浙政钉作为重要的政务协同平台，其应用监控埋点数据的准确采集直接影响着后续的数据分析和决策支持。然而，许多开发团队在实际项目中常常陷入参数…...
自适应混沌粒子群优化算法在PID参数整定中的应用：高效控制策略的代码详解与模型分享
自适应混沌粒子群整定PID/ACPSO-PID/PID参数整定 ACPSO（自适应混沌粒子群优化）整定PID（比例-积分-微分控制器）是一种高效的控制参数优化方法。 它利用粒子群优化（PSO）的基本框架，同时融入混沌理…...
AI视频修复与画质增强完全指南：从低清到高清的视频优化解决方案
AI视频修复与画质增强完全指南：从低清到高清的视频优化解决方案 【免费下载链接】video2x A lossless video/GIF/image upscaler achieved with waifu2x, Anime4K, SRMD and RealSR. Started in Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_…...
别再手动对齐了！Excel双坐标折线图保姆级教程，5分钟搞定销售与成本对比分析
Excel双坐标折线图实战：销售与成本可视化分析的进阶技巧 当市场专员小林第一次尝试将季度销售额（单位：万元）和成本率（单位：百分比）放在同一张图表时，她发现了一个尴尬的现象——代表…...