js文件导出功能

news2024/11/14 15:16:21

效果图：

代码示例：

<!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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Office--加载宏-CS上线

Office--加载宏-CS上线

免责声明:本文仅做技术交流与学习... 目录 关于宏上线的格式: 操作流程: 其他office文本的上线格式一样: 关于宏上线的格式: doc宏病毒: 1-生成格式为dotm 只要点启用宏就上线 2-生成格式为()word 97-2003 .doc) 被杀 操作流…
阅读更多...
Qt入门小项目 | 实现一个图片查看器

Qt入门小项目 | 实现一个图片查看器

文章目录 一、实现一个图片查看软件 一、实现一个图片查看软件 需要实现的功能&#xff1a; 打开目录选择图片显示图片的名字显示图片 在以上功能的基础上进行优化&#xff0c;需要解决如下问题&#xff1a; 如何记住上次打开的路径&#xff1f; 将路径保存到配置文件中&#x…
阅读更多...
LabVIEW在SpaceX的应用

LabVIEW在SpaceX的应用

结合真实的资料介绍LabVIEW在SpaceX的应用&#xff0c;涵盖自动化测试系统、数据采集与监控、可视化与分析、模块化设计与扩展&#xff0c;以及效率与可靠性的提高。 ​ 自动化测试系统 LabVIEW在SpaceX的自动化测试系统中发挥了关键作用。自动化测试是确保SpaceX火箭及其子系…
阅读更多...
Android焦点机制结合WMS

Android焦点机制结合WMS

文章前提&#xff1a; 了解WMS基本作用了解window的概念&#xff0c;phoneWindow&#xff0c;rootViewImpl了解view的事件分发 开始&#xff1a; 讲三件事情&#xff1a; window的创建&#xff0c;更新焦点的更新事件的分发 Window的创建&#xff0c;更新&#xff1a; wi…
阅读更多...
IT入门知识第二部分《编程语言》（2/10）

IT入门知识第二部分《编程语言》（2/10）

目录 IT入门知识博客文章大纲第二部分《编程语言》 1.引言 2.编程语言概述 2.1 编程语言的发展历程 2.2 编程范式 3.常见的编程语言 3.1 Python 3.2 Java 3.3 C 3.4 JavaScript 3.5 Ruby 4.编程语言的选择 4.1 技术需求 4.2 团队技能 4.3 社区和生态系统 4.4 可…
阅读更多...
经验分享，CRC（循环冗余校验）在线计算

经验分享，CRC（循环冗余校验）在线计算

这里分享一个好用的在线计算CRC的网站。 网址&#xff1a;http://www.ip33.com/crc.html 截图&#xff1a;
阅读更多...
Linux - 进程

Linux - 进程

一、什么是进程 首先&#xff0c;Linux是一个多用户多进程的操作系统&#xff0c;系统上可以同时运行多个进程。 进程的产生&#xff1a;①是在执行程序或者命令时产生的&#xff1b;②定时任务进程 进程的类型&#xff1a;前台进程/后台进程 前台进程&#xff1a;一个终端…
阅读更多...
之所以选择天津工业大学，因为它是双一流、报考难度适宜，性价比高！天津工业大学计算机考研考情分析！

之所以选择天津工业大学，因为它是双一流、报考难度适宜，性价比高！天津工业大学计算机考研考情分析！

天津工业大学&#xff08;Tiangong University&#xff09;&#xff0c;简称“天工大”&#xff0c;位于天津市&#xff0c;是教育部与天津市共建高校、国家国防科技工业局和天津市共建的天津市重点建设高校、国家“双一流”建设高校、天津市高水平特色大学建设高校、中国研究生…
阅读更多...
[Linux] 其他命令

[Linux] 其他命令

cat cat是用法极多的一个命令&#xff1a; 1.输入输出 如果不加任何修饰&#xff0c;只一个cat&#xff0c;它是&#xff1a; 标准输入设备&#xff08;键盘&#xff09;——》标准输出设备&#xff08;显示器&#xff09; 显示文件内容&#xff1a; cat filename 输入重定向&a…
阅读更多...
从0开始C++（二）：类、对象、封装

从0开始C++（二）：类、对象、封装

目录 类&对象的概念 类的内容 对象的创建 ● 栈内存对象 ● 堆内存对象 封装 类&对象的概念 类和对象是一个比较抽象的概念&#xff0c;这里直接用一个实例方便理解。 类&#xff1a;类是一个抽象的概念&#xff0c;用来描述同一类对象的特点&#xff08;比如&am…
阅读更多...
深圳中小企业融资攻略，贷款方法大盘点！

深圳中小企业融资攻略，贷款方法大盘点！

中小企业融资这事&#xff0c;可不是一个简单的事情。资金对中小企业来说&#xff0c;就像血液对人体一样重要。企业发展离不开资金支持&#xff0c;特别是在今年这个环境下&#xff0c;政策对中小企业还挺友好的。今天讲解一下中小微企业常用的几种贷款方法。希望能让大家更明…
阅读更多...
Weaver E-Office v9.5 文件上传漏洞（CVE-2023-2648）

Weaver E-Office v9.5 文件上传漏洞（CVE-2023-2648）

前言 CVE-2023-2648 是一个在 Weaver E-Office 9.5 版本中发现的严重漏洞。此漏洞位于文件 /inc/jquery/uploadify/uploadify.php 中&#xff0c;通过操控 Filedata 参数&#xff0c;可以进行不受限制的文件上传。这一漏洞允许攻击者上传可能包含危险类型的文件&#xff0c;并…
阅读更多...
reason: the Java file contained parse errors

reason: the Java file contained parse errors

今天用Maven打包项目时发生一个错误&#xff1a; file: D:\workspace\echoo2.0-xxx-xxx-portal\src\main\java\com\echoo\service\impl\DecDataServiceImpl.java; reason: the Java file contained parse errors 打包报错显示这个类解析错误 在IDEA中没有任何错误提示 问题所…
阅读更多...
​海康威视 isecure center 综合安防管理平台任意文件上传漏洞

​海康威视 isecure center 综合安防管理平台任意文件上传漏洞

文章目录 前言声明一、漏洞描述二、影响版本三、漏洞复现四、修复方案 前言 海康威视是以视频为核心的智能物联网解决方案和大数据服务提供商,业务聚焦于综合安防、大数据服务和智慧业务。 海康威视其产品包括摄像机、多屏控制器、交通产品、传输产品、存储产品、门禁产品、消…
阅读更多...
[Linux] 文件/目录命令

[Linux] 文件/目录命令

pwd print working directory cd change directory cd #返回主目录 cd ..返回上级目录 cd . 不动 cd ~ 用户名 进入某用户的主目录 mkdir mkdir 目录名 mkdir -p xx/yy/zz #一次创建多重目录 rmdir remove directory 删除空目录&#xff0c;只能删除空目录&#xff0c;别的不能…
阅读更多...
嵌入式开发十八：USART串口通信实验

嵌入式开发十八：USART串口通信实验

上一节我们学习了串口通信的基本理论&#xff0c;串口通信是学习单片机的一个重要的一步&#xff0c;非常重要&#xff0c;这一节我们通过实验来学习串口通信的使用&#xff0c;以及串口的接收中断的使用。 一、发送单个字节uint8_t数据或者字符型数据 实现的功能&#xff1a;…
阅读更多...
DETR开篇之作

DETR开篇之作

1. 论文背景和动机 背景&#xff1a; 传统的物体检测方法&#xff08;如Faster R-CNN等&#xff09;通常依赖复杂的多阶段 pipeline&#xff0c;包括区域候选生成、特征提取和后处理步骤。这些方法尽管有效&#xff0c;但复杂度高且难以端到端训练。 动机&#xff1a; DETR的提…
阅读更多...
利用 Qwen-VL 进行私有化部署第一个 AI 多模态大模型

利用 Qwen-VL 进行私有化部署第一个 AI 多模态大模型

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…
阅读更多...
shell脚本之数组及冒泡排序

shell脚本之数组及冒泡排序

1.数组定义&#xff1a;在集合当中指定多个元素&#xff0c;元素的类型可以是整数、字符串及浮点。 2.数组作用&#xff1a;一次性的定义多个元素&#xff0c;可以为变量赋值提供便利。 3.数组的定义方法&#xff1a; 数组名&#xff08;a b c d&#xff09; 数组名不能重复…
阅读更多...
xss一些笔记

xss一些笔记

&#xff08;乱写的一些笔记&#xff09; innerHTML只防script像是img就不会防 innerText都防 上面代码执行避免用户交互 js也可以用’‘执行 例子 alert’1‘ document.location.hash // #号后的部分&#xff0c;包括#号 document.location.host // 域名…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023