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 ...
随机推荐
- linux DNS域名解析
目录 一.DNS概念 二.域名格式类型 三.查询类型 四.解析类型 五.配置DNS 六.dns解析实验 1.配置正向解析 2.反向解析 3.主从解析 一.DNS概念 概念:域名和IP地址的相互映射的分 ...
- LeetCode刷题,代码随想录算法训练营Day3| 链表理论基础 203.移除链表元素 707.设计链表 206.反转链表
链表理论基础 链表是通过指针串联在一起的线性结构,每个节点由一个数据域和一个指针域构成. 链表的类型 单链表 双链表 有两个指针域,一个指向下一个节点,一个指向上一个节点,既可以向前查询也可以向后查询 ...
- JupyterLab Server 搭建与使用笔记
两三个月前,有幸拿到了云筏的一个 4 核 16G,1TB硬盘,300M带宽位于欧洲的云服务器,自带的开箱即用的 RStudio Server 也非常给力,但最近这两天在升级 R 的时候遇上了不少问题, ...
- 如何从零开始构建 API ?
假设你请承包商从零开始建造一座房子,你肯定期望他们交付最高质量的房子.他们必须通过检查.遵守安全规范并遵循项目中约定的要求.因为建房子可容不得走捷径.如果承包商经常走捷径,他们的声誉会受到影响,从而失 ...
- PQ常用模板
//json请求 Json.Document(Web.Contents("",[Headers=[#"cookie"=tk,#"Content-Typ ...
- 【HMS Core】Health Kit云测数据接入相关问题
[问题描述1] 1.由于存在IOS.android.微信小程序,计划接入"云侧数据开放服务",使用模式为我们自己的服务端去同步华为健康数据,终端通过服务端获取最新的数据. 2.在 ...
- Win11右键菜单改回win10
右键以管理员身份运行终端 reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\In ...
- SpringBoot中的yml文件中读取自定义配置信息
SpringBoot中的yml文件中读取自定义配置信息 开发中遇到的问题,百度的答案我都没有找到,去找大佬获取到的经验总结,这只是其中的一种方法,如果其他大佬有新的方法,可以分享分享. 一.非静态属性 ...
- 论文翻译:2021_Real-Time Denoising and Dereverberation wtih Tiny Recurrent U-Net
论文地址:微型循环U-Net实时降噪和去混响 论文代码: https://github.com/YangangCao/TRUNet https://github.com/amirpashamobini ...
- Java protected 关键字详解
很多介绍Java语言的书籍(包括<Java编程思想>)都对protected介绍的比较的简单,基本都是一句话,就是: 被 protected 修饰的成员对于本包和其子类可见.这种说法有点太 ...