使用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. NOIP2021游记

    前言: 今年我是以初中生的身份参加的 NOIP,不计奖,不排名,就去试试水. 考得也不好,幸好没计奖. 正文: 早上 7 点: 到LNBS,在旁边吃了早饭,很好吃. 早上 8 点: 校门口照相,然后进 ...

  2. .NET的基元类型包括哪些?Unmanaged和Blittable类型又是什么?

    在讨论.NET的类型系统的时候,我们经常提到"基元类型(Primitive Type)"的概念,我发现很多人并没有真正理解基元类型就究竟包含哪些(比如很多人觉得字符串是基元类型). ...

  3. Delegation Pattern 委托模式

    原文:https://zh.wikipedia.org/wiki/%E5%A7%94%E6%89%98%E6%A8%A1%E5%BC%8F 委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个 ...

  4. Greenplum 上手

    最近因为一个项目需要,我们准备考虑使用 Greenplum 应用在我们的大数据平台中的数据治理项目中,期待着可以在我们的项目过程中有着更大的价值发现 Greenplum 介绍 Greenplum是一种 ...

  5. HTTP请求:requests的进阶使用方法浅析

    1 背景 上篇文章讲解了requests模块的基础使用,其中有get.put.post等多种请求方式,使用data.json等格式做为请求参数,在请求体中添加请求头部信息的常见信息,如:headers ...

  6. 【技术积累】Java中的集合框架【一】

    什么是Java集合框架? Java集合框架是Java编程语言中提供的一组接口.实现和算法,用于存储和操作数据集合.集合框架可以让程序员更加高效地组织和操作数据,而无需手动实现底层数据结构. Java集 ...

  7. SQL专家云快速解决阻塞

    背景 当数据库突然产生严重阻塞时,运维人员要快速找到阻塞的源头并处理,让业务快速恢复.但是大多数运维人员只掌握了sp_who2.sp_lock等简单的语句,存在以下不足: 找不到真正的源头,过程中会误 ...

  8. ASIC加速技术原理与实践:从芯片设计到优化

    目录 <ASIC加速技术原理与实践:从芯片设计到优化> 背景介绍: 随着数字电路技术的不断发展,ASIC(专门芯片)作为数字电路中的核心部分,逐渐成为芯片设计中的重要组成部分.ASIC加速 ...

  9. 「学习笔记」vector

    本文并不是 vector 的入门教程. 定义 std::vector 是封装动态数组的顺序容器. vector 通常占用多于静态数组的空间,因为要分配更多内存以管理将来的增长.如果元素数量已知,可以使 ...

  10. AI作画本地搭建

    前言 Novel AI (简称NAI)是一个线上的深度学习小说续写平台,而 NAI Diffusion 是 NAI 在2022年10月3日推出的基于 Stable Diffusion 算法的自动生成二 ...