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 ...
随机推荐
- 改变用户体验:Whirl动画加载库的无限可能
哈喽!欢迎来到程序视点.今天小二哥要分享的不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库:Whirl. 让加载动画变得丰富多彩! 最省力的加载动画 话不多说,直接来 ...
- 【python爬虫实战】用python爬取爱奇艺电视剧十大榜单的全部数据!
目录 一.爬取目标 二.讲解代码 三.查看结果 四.视频演示 五.附完整源码 一.爬取目标 本次爬取的目标是,爱奇艺电视剧类目下的10个榜单:电视剧风云榜-爱奇艺风云榜 可以看到,这10个榜单包含 ...
- @SuppressWarnings注解的使用
Java编译器在编译代码时,会产生一些安全警告信息.如果被@SuppressWarnings注解标记的元素,就可以告诉编译器抑制指定的警告. 先看看@SuppressWarnings注解在Java S ...
- React后台管理系统 03全局样式scss
安装scss样式依赖,使用命令 npm i --save-dev sass --dev 会将依赖安装在devDependencies=>开发环境的依赖. 我们在src目录下的assets下创建 ...
- PostgreSQL 12 文档: 部分 VII. 内部
部分 VII. 内部 这一部分包含PostgreSQL开发者可能用到的各类信息. 目录 50. PostgreSQL内部概述 50.1. 一个查询的路径 50.2. 连接如何建立 50.3. 分析器阶 ...
- OC项目集成flutter后,编译卡死
oc项目集成flutter的项目,本来运行的好好的,突然就再Xcode编译就是卡死的情况, 先运行一下flutter的项目,再编译Xcode的项目,就好了
- CF961E Tufurama题解
我们维护一个存储下标数据的树状数组,先将 \(1\sim n\) 插入树状数组. 用 \(a\) 表示原数组,\(b\) 表示按照 \(a_i\) 排序后的数组. 我们从 \(1\) 开始统计,直到 ...
- 通信原理知识点总结(XDU网信通原)
因为感觉第2章和第7章内容特别乱,当时老师讲的时候好像也没有按照一个正确的顺序来讲,所以我就把这两部分的内容按照结构顺序整理了一下,这样更便于理解和记忆 第2章 无线信道传输特性 显示不全点链接看完整 ...
- 如何用Three.js + Blender打造一个web 3D展览馆
作者:vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷,web 3D炙手可热,本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆. 一 ...
- IP 地址斜杠后的数字和子网掩码
目录 先上结论 IP 地址类型 ABC 类地址的划分 网络地址与广播地址 网络地址 广播地址 0.0.0.0 与 127.0.0.1 子网掩码 ABC 类 IP 地址最大网络范围与最大可用主机数 以 ...