使用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的更多相关文章

  1. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  2. 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; ...

  3. Jquery easyui datagrid 导出Excel

    From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...

  4. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

  5. 前端实现table表格导出excel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  7. html表格导出Excel的一点经验心得

    最近在做统计功能,要求统计结果(表格)既能查看(BS系统,在浏览器查看),又能输出为excel文件.对于输出excel文件,在网上找到n种方案,因为还需查看,最终选择了统计结果输出为table,查看时 ...

  8. Element-ui组件库Table表格导出Excel表格

    安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...

  9. html表格导出Excel的实例

    1. 拼成出完整的HMTL的Table代码片段后,转成二进制byte[]类型并存入数据库中,供下载时调出来使用. System.Text.StringBuilder sb = new StringBu ...

  10. Jquery ajax请求导出Excel表格

    直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; data ...

随机推荐

  1. ODOO13之五:Odoo 13开发之导入、导出以及模块数据

    大多数Odoo 模块的定义,如用户界面和安全规则,实际是存储在对应数据表中的数据记录.模块中的 XML 和 CSV 文件不是 Odoo 应用运行时使用,而是载入数据表的手段.正是因为这个原因,Odoo ...

  2. LINIUX 查询命令的 区别 chich whereis locate fing

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which  查看可执行文件的位置. whereis 查看文件的位置. locate   配合数据库查看文件位置 ...

  3. 曲线艺术编程 coding curves 第八章 贝赛尔曲线(Bézier Curves)

    贝赛尔曲线(Bézier Curves) 原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(s ...

  4. 全球唯一云厂商!华为云高分入选2023Gartner Peer Insights™云数据库管理系统“客户之选”

    本文分享自华为云社区<华为云高分入选2023Gartner Peer Insights云数据库管理系统"客户之选">,作者:GaussDB 数据库 . 近日,Gartn ...

  5. [ARM 汇编]高级部分—性能优化与调试—3.4.1 性能分析与优化策略

    性能优化是嵌入式系统开发中的一个重要环节,尤其是在资源受限的环境下.性能优化的目标是提高代码执行速度.降低功耗和减少内存占用.在本章节中,我们将讨论性能分析与优化策略,并通过实例来学习如何应用这些策略 ...

  6. 精选Golang高频面试题和答案汇总

    大家好,我是阳哥. 之前写的< GO必知必会面试题汇总>,已经阅读破万,收藏230+. 也欢迎大家收藏.转发本文. 这篇文章给大家整理了17道Go语言高频面试题和答案详解,每道题都给出了代 ...

  7. 提升性能的利器:深入解析SectionReader

    一. 简介 本文将介绍 Go 语言中的 SectionReader,包括 SectionReader的基本使用方法.实现原理.使用注意事项.从而能够在合适的场景下,更好得使用SectionReader ...

  8. 我用numpy实现了GPT-2,GPT-2源码,GPT-2模型加速推理,并且可以在树莓派上运行,读了不少hungging face源码,手动实现了numpy的GPT2模型

    之前分别用numpy实现了mlp,cnn,lstm和bert模型,这周顺带搞一下GPT-2,纯numpy实现,最重要的是可在树莓派上或其他不能安装pytorch的板子上运行,生成数据 gpt-2的ma ...

  9. 【SpringBoot】注解

    Controller - @RestController - @RequestMapping("/path") Controller内方法 @GetMapping("/p ...

  10. Linux 基础(一)

    Linux 基础(一) 理念 一切皆文件 硬件 文件名 显示器 fb0 鼠标 mouse1 键盘 event0 触摸屏 event1 摄像头 video0 打开摄像头:open video0 ​​打开 ...