首页 知识「Expertise」正文

如何在html中通过table导出Excel?

有时候我们需要把网页中的数据导出excel格式来,那么我们用下面两种方法可以完成。

第一种.自写代码

<html><head><meta http-equiv="content-Type" content="text/html;charset=utf-8"/><script type="text/javascript">
    function base64 (content) {
       return window.btoa(unescape(encodeURIComponent(content)));         
    }
    /*
    *@tableId: table的Id
    *@fileName: 要生成excel文件的名字(不包括后缀,可随意填写)
    */
    function tableToExcel(tableID,fileName){
        var table = document.getElementById(tableID);
      var excelContent = table.innerHTML;
      var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
      excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
      excelFile += "<body><table>";
      excelFile += excelContent;
      excelFile += "</table></body>";
      excelFile += "</html>";
      var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
      var a = document.createElement("a");
      a.download = fileName+".xlsx";
      a.href = link;
      a.click();
    }</script></head><body><button type="button" onclick="tableToExcel('item','data')">导出</button><table id="item">
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>1</td>
    <td>小明</td>
    <td>19</td>
  </tr>
  <tr>
    <td>2</td>
    <td>小芳</td>
    <td>20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>大军</td>
    <td>22</td>
  </tr></table></body></html>

第二种.jquery插件

首先要先下载一个jquery.table2excel.js插件(网上搜搜),然后使用。

<!doctype html>    <html>    <head>    
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>table2excel</title>    
    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css">    </head>    <body>    
    <header>    
        <h4>table2excel-可将HTML表格内容导出到Excel中的jQuery插件 <span>jQuery Plugin to export HTML tabled to Excel Spreadsheet Compatible Files</span></h4>    
    </header>    
    <section>    
        <div style="padding:30px 0">    
            <div>    
                <div>    
                    <div class="table-responsive table2excel" data-tableName="Test Table 1">    
                    <table class="table table-striped table-bordered table-hover">    
                    <thead>    
                    <tr>    
                    <td>带<code>noExl</code>class的行不会被输出到excel中</td>    
                    <td>带<code>noExl</code>class的行不会被输出到excel中</td>    
                    </tr>    
                    <tr>    
                    <td>这一行会被导出到excel中</td>    
                    <td>这一行会被导出到excel中</td>    
                    </tr>    
                    </thead>    
                    <tbody>    
                    <tr>    
                            <td>单元格1-1</td>    
                            <td>单元格1-2</td>    
                    </tr>    
                    <tr>    
                            <td>单元格2-1</td>    
                            <td>单元格2-2</td>    
                    </tr>    
                    <tr>    
                            <td>单元格3-1</td>    
                            <td>单元格3-2</td>    
                    </tr>    
                    </tbody>    
                    <tfoot>    
                            <tr>    
                            <td colspan="2">合并2个单元格</td>    
                            </tr>    
                        </tfoot>    
                    </table>    
                    </div>    
                </div>    
            </div>    
            <button id="btn" class="btn btn-primary">点击这里将表格内容导出到excel中</button>    
        </div>    
    </section>    
    <script src="jquery/jquery-1.8.0.min.j"></script>    
    <script src="dist/jquery.table2excel.js"></script>    
    <script>    
        $(function() {    
            $("#btn").click(function(){    
                $(".table2excel").table2excel({    
                    exclude: ".noExl",    
                    name: "Excel Document Name",    
                    filename: "FileName.xls",    
                    exclude_img: true,    
                    exclude_links: true,    
                    exclude_inputs: true    
                });    
            });    
        });    
    </script>    </body>    </html>

附上jquery-table2excel.js下载地址

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

本文标题:如何在html中通过table导出Excel?
本文链接:https://vtzw.com/post/215.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一de世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

评论