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值) { 循环体(条件满足时执行的代码块) …...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...