html中table导出Excel

来源：互联网发布：下载qq软件2016 编辑：程序博客网时间：2024/06/04 17:59

有时候我们需要把网页中的数据导出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 lang="zh">    <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 class="jq22-header">            <h4>table2excel-可将HTML表格内容导出到Excel中的jQuery插件 <span>jQuery Plugin to export HTML tabled to Excel Spreadsheet Compatible Files</span></h4>        </header>        <section class="jq22-container">            <div class="container" style="padding:30px 0">                <div class="row">                    <div class="md-col-8">                        <div class="table-responsive table2excel" data-tableName="Test Table 1">                        <table class="table table-striped table-bordered table-hover">                        <thead>                        <tr class="noExl">                        <td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>                        <td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>                        </tr>                        <tr>                        <td class="success">这一行会被导出到excel中</td>                        <td class="success">这一行会被导出到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" class="warning">合并2个单元格</td>                                </tr>                            </tfoot>                        </table>                        </div>                    </div>                </div>                <button id="btn" class="btn btn-primary">点击这里将表格内容导出到excel中</button>            </div>        </section>        <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>        <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>        <script src="dist/jquery.table2excel.js"></script>        <script>            $(function() {                $("#btn").click(function(){                    $(".table2excel").table2excel({                        exclude: ".noExl",                        name: "Excel Document Name",                        filename: "myFileName",                        exclude_img: true,                        exclude_links: true,                        exclude_inputs: true                    });                });            });        </script>    </body>    </html>

详情请浏览：html中table导出Excel

阅读全文

0 0