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

导出结果:

实现步骤:

1.进入相关js插件

  1. <script src="external/jquery-1.10.2.js"></script>
  2. <script type="text/javascript" src="external/jszip.min.js"></script>
  3. <script type="text/javascript" src="external/FileSaver.js"></script>
  4. <script type="text/javascript" src="scripts/excel-gen.js"></script>
  5. <script type="text/javascript" src="scripts/demo.page.js"></script>

2. 将HTML的table标签的id设置为test_table

  1. <table class="table table-bordered table-striped" id="test_table">
  2. <thead>
  3. <tr>
  4. <td>等级</td>
  5. <td>姓名</td>
  6. <td>城市</td>
  7. <td></td>
  8. <td>部门</td>
  9. <td>选取</td>
  10. <td>票数</td>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td>
  16. <span>1</span>
  17. </td>
  18. <td>
  19. <span>Small, Steve </span>
  20. </td>
  21. <td>
  22. <span>New York</span>
  23. </td>
  24. <td>
  25. <span>NY</span>
  26. </td>
  27. <td>
  28. <span>Eastern</span>
  29. </td>
  30. <td>
  31. <span>Metropolitan Region</span>
  32. </td>
  33. <td>
  34. <span>378</span>
  35. </td>
  36. </tr>
  37. <tr>
  38. <td>
  39. <span>2</span>
  40. </td>
  41. <td>
  42. <span>Novello, Rodolfo </span>
  43. </td>
  44. <td>
  45. <span>Lawrence</span>
  46. </td>
  47. <td>
  48. <span>NY</span>
  49. </td>
  50. <td>
  51. <span>Eastern</span>
  52. </td>
  53. <td>
  54. <span>Long Island Region</span>
  55. </td>
  56. <td>
  57. <span>223</span>
  58. </td>
  59. </tr>
  60.  
  61. </tbody>
  62. </table>

3.给按钮注册单击事件,导出Excel

  1. $(document).ready(function () {
  2. excel = new ExcelGen({
  3. "src_id": "test_table",
  4. "show_header": true
  5. });
  6. $("#generate-excel").click(function () {
  7. excel.generate();
  8. });
  9. });

本例源码下载:

链接: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. linux DNS域名解析

    目录 一.DNS概念 二.域名格式类型 三.查询类型 四.解析类型 五.配置DNS 六.dns解析实验 1.配置正向解析 2.反向解析 3.主从解析 一.DNS概念 概念:域名和IP地址的相互映射的分 ...

  2. LeetCode刷题,代码随想录算法训练营Day3| 链表理论基础 203.移除链表元素 707.设计链表 206.反转链表

    链表理论基础 链表是通过指针串联在一起的线性结构,每个节点由一个数据域和一个指针域构成. 链表的类型 单链表 双链表 有两个指针域,一个指向下一个节点,一个指向上一个节点,既可以向前查询也可以向后查询 ...

  3. JupyterLab Server 搭建与使用笔记

    两三个月前,有幸拿到了云筏的一个 4 核 16G,1TB硬盘,300M带宽位于欧洲的云服务器,自带的开箱即用的 RStudio Server 也非常给力,但最近这两天在升级 R 的时候遇上了不少问题, ...

  4. 如何从零开始构建 API ?

    假设你请承包商从零开始建造一座房子,你肯定期望他们交付最高质量的房子.他们必须通过检查.遵守安全规范并遵循项目中约定的要求.因为建房子可容不得走捷径.如果承包商经常走捷径,他们的声誉会受到影响,从而失 ...

  5. PQ常用模板

    //json请求 Json.Document(Web.Contents("",[Headers=[#"cookie"=tk,#"Content-Typ ...

  6. 【HMS Core】Health Kit云测数据接入相关问题

    ​[问题描述1] 1.由于存在IOS.android.微信小程序,计划接入"云侧数据开放服务",使用模式为我们自己的服务端去同步华为健康数据,终端通过服务端获取最新的数据. 2.在 ...

  7. Win11右键菜单改回win10

    右键以管理员身份运行终端 reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\In ...

  8. SpringBoot中的yml文件中读取自定义配置信息

    SpringBoot中的yml文件中读取自定义配置信息 开发中遇到的问题,百度的答案我都没有找到,去找大佬获取到的经验总结,这只是其中的一种方法,如果其他大佬有新的方法,可以分享分享. 一.非静态属性 ...

  9. 论文翻译:2021_Real-Time Denoising and Dereverberation wtih Tiny Recurrent U-Net

    论文地址:微型循环U-Net实时降噪和去混响 论文代码: https://github.com/YangangCao/TRUNet https://github.com/amirpashamobini ...

  10. Java protected 关键字详解

    很多介绍Java语言的书籍(包括<Java编程思想>)都对protected介绍的比较的简单,基本都是一句话,就是: 被 protected 修饰的成员对于本包和其子类可见.这种说法有点太 ...