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 ...
随机推荐
- TypeError: Cannot read property 'getAttribute' of undefined
今天使用echarts + vue 做 图标,运行时提示vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "Typ ...
- Redis系列13:分布式锁实现
Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...
- Galaxy Release (v 21.05),众多核心技术栈变更
2021年6月初,Galaxy Project 正式发布了 release 21.05 版本:随后6月中旬,发布该版本的 announcement 文档.这里总结一下该版本一些主要的更新内容,为关注和 ...
- 文档在线预览(四)将word、txt、ppt、excel、图片转成pdf来实现在线预览
@ 目录 事前准备 1.需要的maven依赖 2.后面用到的工具类代码: 一.word文件转pdf文件(支持doc.docx) 二.txt文件转pdf文件 三.PPT文件转pdf文件(支持ppt.pp ...
- Rust中的变量的声明和定义
变量的声明和定义 Rust中合法的标识符(包括变量名.函数名.triat名等)必须由数字.字母.下划线组成,而且不能以数字开头.这个和很多语言都是一样的.Rust将来也会允许其他Unicode字符作为 ...
- 使用Mybatis生成树形菜单-适用于各种树形场景
开发中我们难免会遇到各种树形结构展示的场景.比如用户登录系统后菜单的展示,某些大型购物网站商品的分类展示等等,反正开发中会遇到各种树形展示的功能,这些功能大概处理的思路都是一样的,所以本文就总结一下树 ...
- Pinot2的无人机传感器和摄像头
目录 1. 引言 2. 技术原理及概念 2.1 基本概念解释 2.2 技术原理介绍 2.3 相关技术比较 无人机传感器和摄像头在Pinot 2中得到广泛应用,其目的是为Pinot 2提供全面的传感器和 ...
- 代理详解(java代理和CGLIB动态代理)
[代理]大家都知道,特别是在spring中aop.spring中的事务.spring解析注解@Configuration,以及最原始的解析spring.xml的配置,这些都是使用代理来进行实现的, ...
- Java 输入字符串,统计大写字母,小写字母,数字字符的个数
代码如下: public static void main(String[] args) { String str = "AaFsECvcS12483fs+-*/"; int bi ...
- Taurus .Net Core 微服务开源框架:Admin 插件【3】 - 指标统计管理
前言: 继上篇:Taurus .Net Core 微服务开源框架:Admin 插件[2] - 系统环境信息管理 本篇继续介绍下一个内容: 1.系统指标节点:Metric - API 界面 界面图如下: ...