html页面里table导出为excel

只要想不到,没有做不到,一直都不知道html里table元素可直接导出为excel,太牛逼了!

这其中用到一个jquery的插件table2excel

使用方法也很简单:

1 。 包含必要的文件

<script src="src/1.11.1/jquery.min.js"></script>
<script src="src/jquery.table2excel.js"></script>

2。 创建导出按钮

<button>Export</button>

3。 给导出按钮添加事件

$(".table2excel").table2excel({
  exclude: ".noExl",  // 不想导出的行加上class=‘noExl‘即可
  name: "Excel Document Name", // excel文档名
  filename: "myFileName" // excel文件名
});

完整的看下DEMO

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Boilerplate</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="../src/jquery.table2excel.js"></script>
  </head>
  <body>
    <table class="table2excel" data-tableName="Test Table 1">
      <thead>
        <tr class="noExl"><td>This shouldn‘t get exported</td><td>This shouldn‘t get exported either</td></tr>
        <tr><td>This Should get exported as a header</td><td>This should too</td></tr>
      </thead>
      <tbody>
        <tr><td>data1a</td><td>data1b</td></tr>
        <tr><td>data2a</td><td>data2b</td></tr>
      </tbody>
      <tfoot>
        <tr><td colspan="2">This footer spans 2 cells</td></tr>
      </tfoot>
    </table>

    <table class="table2excel" data-tableName="Test Table 2">
      <thead>
        <tr class="noExl"><td>This shouldn‘t get exported</td><td>This shouldn‘t get exported either</td></tr>
        <tr><td>This Should get exported as a header</td><td>This should too</td></tr>
      </thead>
      <tbody>
        <tr><td>data1a</td><td>data1b</td></tr>
        <tr><td>data2a</td><td>data2b</td></tr>
      </tbody>
      <tfoot>
        <tr><td colspan="2">This footer spans 2 cells</td></tr>
      </tfoot>
    </table>

    <script>
      $(function() {
        $(".table2excel").table2excel({
          exclude: ".noExl",
          name: "Excel Document Name",
          filename: "myFileName"
        });
      });
    </script>
  </body>
</html>
时间: 2024-10-18 09:55:36

html页面里table导出为excel的相关文章

将table导出为Excel的标准无乱码写法

导出为Excel有很多种写法,对于一些复杂的格式,笔者喜欢在后台先拼成一个<table>,再使用Response输出. 如果数据中包含中文或者一些特殊字符,可很多不规范的写法都会导致页面乱码,这里就把一种(笔者认为)最标准的格式带给大家: Page p = HttpContext.Current.Handler as Page; p.Response.Clear(); p.Response.Buffer = true; p.Response.Charset = "UTF-8"

HTML Table导出为Excel的方法

HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript"> var idTmr; function getE

直接把页面的table导出到excel表中

前台HTML 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReLoadLogin.aspx.cs" Inherits="ReLoadLogin" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

html table导出到Excel中,不走后台,js完成

静态表格table <table class="table tableStyles" id="tables"> <caption>不正经的统计表</caption><!--可以生成表格的标题--> <thead> <tr> <th>品牌</th> <th>门店</th> <th>本周回访</th> <th>本月回

JS 导出网页中Table内容到excel

1 <html> 2 <head> 3 <script type="text/javascript" language="javascript"> 4 var idTmr; 5 function method1(tableid) {//整个表格拷贝到EXCEL中 6 var curTbl = document.getElementById(tableid); 7 var oXL = new ActiveXObject("

jsp 页面内容导出到Excel中

日常使用网络资源时经常需要把网页中的内容下载到本地,并且导出到Excel中,现在介绍一种非常简单的方式实现网络资源的下载.只需要讲jsp的最上面加上一句话 <% response.reset(); response.setContentType("application/vnd.ms-excel;charset=GBK"); %> 就可以将网页的内容导出为Excel. 目前给出的例子为了方便起见,就是使用了纯粹的静态页面,一个table其中有一行是标题,一行是内容,但是实际

html页面表格导出到excel

几种把html页面表格导出到excel的方法比较. 表格例子如下: <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" align="center">html 表格导出道Exceltd

JS 将页面上的表格导出为 Excel 文件

如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 Excel 能打开 HTML 文档的特性,所以导出的表格实际上是一个 HTML 文档,并且其扩展名只能为 .xls,而不能是 .xlsx,否则Excel无法打开.(有使用JavaScript生成真正Excel文件的方案,以后再研究.) 实例: <!DOCTYPE html> <html>

如何把高德地图搜索商家电话资料导出成excel里?

有很多人问我,怎么样能够快速的把高德地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 如何快速地将高德地图里的商家电话资料导出EXCEL? 操作步骤: 1. 选择你要采集的省份, 城市列表里就会有相应的省份的城市列表. 2. 选择要采集的城市,比如: 济南 3. "同时保存为Excel"  选项, 采集完毕后,程序首先会保存一份access数据库文件, 如果这里的对勾打上,则会在相应的文件夹下再产生一个EXCEL文件. 4. "打开文件位置", 采集完毕后