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 ;
      //ie
      if (explorer.indexOf("MSIE") >= 0) {
        return 'ie';
      }
      //firefox
      else if (explorer.indexOf("Firefox") >= 0) {
        return 'Firefox';
      }
      //Chrome
      else if(explorer.indexOf("Chrome") >= 0){
        return 'Chrome';
      }
      //Opera
      else if(explorer.indexOf("Opera") >= 0){
        return 'Opera';
      }
      //Safari
      else 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>

 这只是我个人总结的方法还可以用其他方法希望可以帮到大家

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/725113.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Qt打包成单独一个.exe文件运行

Qt打包成单独一个.exe文件运行

程序发布 1、首先找到你所运行的Qt编译器 2、然后去项目位置找到对应的release目录下的exe文件 3、将这个exe文件复制到一个单独的文件夹下&#xff0c;这里我放在E盘的demo下面 4、右键选择在终端打开PowerShell进入步骤1新建的demo目录内 5、windeployqt 项目名.exe windepl…
阅读更多...
音视频入门基础：H.264专题（3）——EBSP, RBSP和SODB

音视频入门基础：H.264专题（3）——EBSP, RBSP和SODB

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…
阅读更多...
PLC模拟量和数字量到底有什么区别?

PLC模拟量和数字量到底有什么区别?

PLC模拟量和数字量的区别 在工业自动化领域&#xff0c;可编程逻辑控制器&#xff08;PLC&#xff09;是控制各种机械设备和生产过程的核心组件。PLC通过处理模拟量和数字量来实现对工业过程的精确控制。了解模拟量和数字量的区别对于设计高效、可靠的自动化系统至关重要。 1. …
阅读更多...
[面试题]消息队列

[面试题]消息队列

[面试题]Java【基础】[面试题]Java【虚拟机】[面试题]Java【并发】[面试题]Java【集合】[面试题]MySQL[面试题]Maven[面试题]Spring Boot[面试题]Spring Cloud[面试题]Spring MVC[面试题]Spring[面试题]MyBatis[面试题]Nginx[面试题]缓存[面试题]Redis[面试题]消息队列 什么是…
阅读更多...
异构集成封装类型2D、2.1D、2.3D、2.5D和3D封装技术

异构集成封装类型2D、2.1D、2.3D、2.5D和3D封装技术

异构集成封装类型&#xff1a;2D、2.1D、2.3D、2.5D和3D封装详解 简介随着摩尔定律的放缓&#xff0c;半导体行业越来越多地采用芯片设计和异构集成封装来继续推动性能的提高。这种方法是将大型硅芯片分割成多个较小的芯片&#xff0c;分别进行设计、制造和优化&#xff0c;然后…
阅读更多...
如何通过自己编写Jmeter函数

如何通过自己编写Jmeter函数

在Jmeter的函数助手里&#xff0c;有很多内置的函数&#xff0c;比如Random、UUID、time等等。使用这些函数可以快速帮我们生成某些数据&#xff0c;进行一些逻辑处理。用起来非常的方便。 但是在实际接口测试过程中&#xff0c;有很多的需求&#xff0c;Jmeter内置的函数可能…
阅读更多...
决策树概念

决策树概念

图例 概念 决策树基本上就是对经验的总结 决策树的构成&#xff0c;分为两个阶段。构造和剪枝 构造 概念 构造就是生成一颗完整的决策树。构造的过程就是选择什么属性作为节点的过程 构造过程&#xff0c;会存在3种节点 根节点&#xff1a;就是树的最顶端&#xff0c;最…
阅读更多...
四十九、openlayers官网示例Immediate Rendering (Geographic)——在地图上绘制星空动画效果

四十九、openlayers官网示例Immediate Rendering (Geographic)——在地图上绘制星空动画效果

官网demo地址&#xff1a; Immediate Rendering (Geographic) 首先先创建1000个随机点&#xff0c;创建点对象。 const n 1000;const geometries new Array(n);for (let i 0; i < n; i) {const lon 360 * Math.random() - 180;const lat 180 * Math.random() - 90;ge…
阅读更多...
英伟达市值飙升，超越苹果微软并超过英国股市总市值

英伟达市值飙升，超越苹果微软并超过英国股市总市值

原标题&#xff1a;英伟达超越苹果微软市值&#xff0c;成为全球市值最高的企业 易采游戏网6月19日消息&#xff1a;近日&#xff0c;美国科技巨头英伟达市值的迅速增长引起了市场广泛关注。据最新数据显示&#xff0c;截至本周二收盘&#xff0c;英伟达的市场资本化已达到3.34…
阅读更多...
PhantomReference 和 WeakReference 究竟有何不同

PhantomReference 和 WeakReference 究竟有何不同

本文基于 OpenJDK17 进行讨论&#xff0c;垃圾回收器为 ZGC。 提示&#xff1a; 为了方便大家索引&#xff0c;特将在上篇文章 《以 ZGC 为例&#xff0c;谈一谈 JVM 是如何实现 Reference 语义的》 中讨论的众多主题独立出来。 PhantomReference 和 WeakReference 如果仅仅从概…
阅读更多...
在二维空间中用椭圆表示不确定性

在二维空间中用椭圆表示不确定性

在二维空间中用椭圆表示不确定性 flyfish import numpy as np import matplotlib.pyplot as plt from matplotlib.patches import Ellipse# 生成示例数据 np.random.seed(0) data np.random.multivariate_normal([0, 0], [[4, 2], [2, 3]], size500)# 计算均值和协方差矩阵 …
阅读更多...
Java15-API

Java15-API

目录 Math类 概述 常见方法 练习 System类 概述 常见方法 Runtime 概述 常见方法 Object类 概述 常见方法 一.演示toString方法 二.演示equals方法 三、对象克隆 分类&#xff1a; 浅克隆 深克隆&#xff1a; Objests类 概述 常见方法 BigInteger类 概…
阅读更多...
基于C++、MFC和Windows套接字实现的简单聊天室程序开发

基于C++、MFC和Windows套接字实现的简单聊天室程序开发

一、一个简单的聊天室程序 该程序由服务器端和客户端两个项目组成&#xff0c;这两个项目均基于对话框的程序。服务器端项目负责管理客户端的上线、离线状态&#xff0c;以及转发客户端发送的信息。客户端项目则负责向服务器发送信息&#xff0c;并接收来自服务器的信息&#…
阅读更多...
keil5显示内存和存储占用百分比进度条工具

keil5显示内存和存储占用百分比进度条工具

简介 [Keil5_disp_size_bar] 以进度条百分比来显示keil编译后生成的固件对芯片的内存ram和存储flash的占用情况, 并生成各个源码文件对ram和flash的占比整合排序后的map信息的表格和饼图。 原理是使用C语言遍历当前目录找到keil工程和编译后生成的map文件 然后读取工程文件和m…
阅读更多...
【linux】Valgrind工具集详解（十六）：交叉编译、移植到arm（失败）

【linux】Valgrind工具集详解（十六）：交叉编译、移植到arm（失败）

1、源码下载 官网：https://valgrind.org/ 源码：https://valgrind.org/downloads/current.html 2、配置 ./configure CC=arm-linux-gnueabihf-gcc \CXX=arm-linux-gnueabihf-g++ \AR=arm-linux-gnueabihf-ar \--host=arm-linux-gnueabihf \--pr
阅读更多...
急，在线等！老板让我做数仓一点思路没有怎么办

急，在线等！老板让我做数仓一点思路没有怎么办

刚来公司一个月&#xff0c;老板就让我负责了公司数据仓库的建设&#xff0c;但我一点思路都没有这可咋整&#xff01; 在了解公司人事部门和行政部门的相关数据存在数据孤岛的问题后&#xff0c;我决定从人事系统入手。目前公司的数据还存在一些问题亟待解决&#xff1a; 1.员…
阅读更多...
Google 广告VS Facebook广告：哪个更适合我？2024全维度区别详解

Google 广告VS Facebook广告：哪个更适合我？2024全维度区别详解

在 Google Ads 和 Facebook Ads 之间进行选择可能是一个艰难的决定。决定哪种方法适合您的业务取决于多种因素&#xff0c;从您愿意为转化支付的费用到管理广告系列所需的时间和人员。在这篇文章中&#xff0c;将解释 Google Ads 和 Facebook Ads 之间的差异&#xff0c;以便您…
阅读更多...
网络中数据链路层详解

网络中数据链路层详解

数据链路层其实我们这里了解即可&#xff0c;因为做交换机开发的是主要学习这方面的知识。 这里我们主要了解以太网协议。 以太网是物理学的概念。以太网横跨数据链路层和物理层&#xff0c;平时咱们使用有线网就是以太网络。 如图以太网协议的报文格式&#xff1a; 上述的目…
阅读更多...
张大哥笔记：如何选择一个人就值得做的副业

张大哥笔记：如何选择一个人就值得做的副业

很多人喜欢把上班称为主业&#xff0c;把上班之外的工作称为副业&#xff0c;不管以哪种方式称呼都可以&#xff0c;只要能赚钱就行&#xff0c;上班的本质就是出卖时间&#xff0c;不管你是月入5000还是月入2万&#xff0c;都是给老板打工&#xff01; 但搞笑的就是月入2万的人…
阅读更多...
《昇思25天学习打卡营第1天 | 认识MindScope AI框架和昇思大模型平台》

《昇思25天学习打卡营第1天 | 认识MindScope AI框架和昇思大模型平台》

活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 昇思MindSpore学习笔记&#xff1a;探索AI的无限可能 嗨&#xff0c;AI爱好者们&#xff01;今天&#xff0c;我要带你们深入了解一个强大的全场景深度学习框架——昇思MindSpore。 准备好了吗…
阅读更多...
最新文章

Copyright @ 2022~2023