jquery实现表格导出Excel
使用jQuery,jszip.js,FileSaver.js,excel-gen.js插件直接将网页中的table表格导出到本地Excel文件,而不需要经过后台。

导出结果:

实现步骤:
1.进入相关js插件
<script src="external/jquery-1.10.2.js"></script>
<script type="text/javascript" src="external/jszip.min.js"></script>
<script type="text/javascript" src="external/FileSaver.js"></script>
<script type="text/javascript" src="scripts/excel-gen.js"></script>
<script type="text/javascript" src="scripts/demo.page.js"></script>
2. 将HTML的table标签的id设置为test_table
<table class="table table-bordered table-striped" id="test_table">
<thead>
<tr>
<td>等级</td>
<td>姓名</td>
<td>城市</td>
<td>州</td>
<td>部门</td>
<td>选取</td>
<td>票数</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>1</span>
</td>
<td>
<span>Small, Steve </span>
</td>
<td>
<span>New York</span>
</td>
<td>
<span>NY</span>
</td>
<td>
<span>Eastern</span>
</td>
<td>
<span>Metropolitan Region</span>
</td>
<td>
<span>378</span>
</td>
</tr>
<tr>
<td>
<span>2</span>
</td>
<td>
<span>Novello, Rodolfo </span>
</td>
<td>
<span>Lawrence</span>
</td>
<td>
<span>NY</span>
</td>
<td>
<span>Eastern</span>
</td>
<td>
<span>Long Island Region</span>
</td>
<td>
<span>223</span>
</td>
</tr> </tbody>
</table>
3.给按钮注册单击事件,导出Excel
$(document).ready(function () {
excel = new ExcelGen({
"src_id": "test_table",
"show_header": true
});
$("#generate-excel").click(function () {
excel.generate();
});
});
本例源码下载:
链接:https://pan.baidu.com/s/13sAXqB3cwu7h-jdOiTnkHQ
提取码:2bbn
jquery实现表格导出Excel的更多相关文章
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
- 前端实现table表格导出excel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- html表格导出Excel的一点经验心得
最近在做统计功能,要求统计结果(表格)既能查看(BS系统,在浏览器查看),又能输出为excel文件.对于输出excel文件,在网上找到n种方案,因为还需查看,最终选择了统计结果输出为table,查看时 ...
- Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
- html表格导出Excel的实例
1. 拼成出完整的HMTL的Table代码片段后,转成二进制byte[]类型并存入数据库中,供下载时调出来使用. System.Text.StringBuilder sb = new StringBu ...
- Jquery ajax请求导出Excel表格
直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; data ...
随机推荐
- Kali系统 连接 Xshell
1> 进入kali系统,修改ssh配置文件:vi /etc/ssh/sshd_config 2> 将PermitRootLogin without-password修改为:PermitRo ...
- Linux之从进程角度来理解文件描述符
文件描述符是一个非负整数,而内核需要通过这个文件描述符才可以访问文件.当我们在系统中打开已有的文件或新建文件时,内核每次都会给特定的进程返回一个文件描述符,当进程需要对文件进行读或写操作时,都要依赖这 ...
- v8 study
v8环境搭建看这里 现在的v8采用的是Ignition(JIT生成) + TurboFan(优化) v8调试 安装pwngdb git clone https://github.com/pwndbg/ ...
- 如何使用Go中的Weighted实现资源管理
1. 简介 本文将介绍 Go 语言中的 Weighted 并发原语,包括 Weighted 的基本使用方法.实现原理.使用注意事项等内容.能够更好地理解和应用 Weighted 来实现资源的管理,从而 ...
- 上下文管理者(ServletContext)
作用1.获取全局初始化参数2.资源共享(servlet通信) 能让上下文呢的Servlet相互关联起来3.获取资源文件 生命周期创建服务器启动的时候会为每个项目创建一个servletContext上下 ...
- LeetCode 周赛 348(2023/06/05)数位 DP 模板学会了吗
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 加入知识星球提问! 往期回顾:LeetCode 单周赛第 347 场 · 二维空间上的 LIS 最长递增子序列问题 ...
- 2023-06-06:给你二叉树的根结点 root ,请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言, 其左右子结点分别位于 (row + 1, col -
2023-06-06:给你二叉树的根结点 root ,请你设计算法计算二叉树的 垂序遍历 序列. 对位于 (row, col) 的每个结点而言, 其左右子结点分别位于 (row + 1, col - ...
- 前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
前端Vue分享菜单按钮弹框.微博分享.QQ分享.微信好友.朋友圈 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13085 效 ...
- 聊聊Flink CDC必知必会
CDC是(Change Data Capture变更数据获取)的简称. 核心思想是,监测并捕获数据库的变动(包括数据 或 数据表的插入INSERT.更新UPDATE.删除DELETE等),将这些变更按 ...
- 未来的编程语言「GitHub 热点速览」
又一个编程语言火了,不算新,因为它已经开发了一段时间.不过在本周 Hacker News 上风头十足,DreamBerd 除了有点意思的改 ; 分隔符为 !,之外,它还能让你用问号来标注一段你也不确定 ...