zoukankan      html  css  js  c++  java
  • <table>导出excal

    <table>导出excal

     将<table>导出为excal文件,这里介绍两种方法。

    1.直接写代码,拼接出excal文件的字符串,然后直接用a标签下载。本人没有是试过,在此粘下代码留念。

    <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>
    View Code

    2.用jquery的插件:jquery.table2excel.js

    这个就更简单了,只有5个配置项。

    $('button').click(function(){              //下载按钮
            $("#datatable").table2excel({         //table标签id
                exclude: ".noExl",
                name: "Excel Document Name",
                filename: "myFileName",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true
            });
        })
    //      table2excel插件的可用配置参数有:
    //
    // exclude:不被导出的表格行的CSS class类。
    // name:导出的Excel文档的名称。
    // filename:Excel文件的名称。
    // exclude_img:是否导出图片。
    // exclude_links:是否导出超链接
    // exclude_inputs:是否导出输入框中的内容。

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj">
    
        <tbody>
        <tr>
            <td><div align="center" id="titlelable">起始时间</div></td>
            <td><div align="center" id="titlelable">通信地点</div></td>
            <td><div align="center" id="titlelable">上网方式</div></td>
            <td><div align="center" id="titlelable">总时长</div></td>
            <td><div align="center" id="titlelable">总流量</div></td>
            <td><div align="center" id="titlelable">套餐优惠</div></td>
            <td><div align="center" id="titlelable">优惠或减免</div></td>
            <td><div align="center" id="titlelable">通信费</div></td>
            <td><div align="center" id="titlelable">终端类型</div></td>
        </tr>
    
    
        <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
            <td>10-01 01:57:05</td>
            <td></td>
            <td>CMNET</td>
            <td>0秒</td>
            <td>0.001</td>
            <td>校园4G套餐-400M国内流量</td>
            <td></td>
            <td>0.00</td>
            <td></td>
        </tr>
    
    
        </tbody>
    </table>
    <button>导出EXCEL</button>
    
        <script src="js/jquery.js"></script>
    
    <script src="js/jquery.table2excel.js"></script>
    <script>
        $('button').click(function(){
            console.log(1)
            $("#datatable").table2excel({
                exclude: ".noExl",
                name: "Excel Document Name",
                filename: "myFileName",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true
            });
        })
    
    
        //      table2excel插件的可用配置参数有:
        //
        //            exclude:不被导出的表格行的CSS class类。
        //            name:导出的Excel文档的名称。
        //            filename:Excel文件的名称。
        //            exclude_img:是否导出图片。
        //            exclude_links:是否导出超链接
        //            exclude_inputs:是否导出输入框中的内容。
    
    </script>
    </body>
    </html>
    View Code

    参考链接:https://blog.csdn.net/jesslu/article/details/77866040

  • 相关阅读:
    Const is faster than static const
    创新点子:博客图文混编工具
    Performance Optimization Articles
    Notes on distributed rendering
    Tested distancebased sorting and axisbased sorting
    How do exes/dlls generated with the /platform:x switch interact?
    SQL中判断字符串中包含字符的方法
    C#获取指定IP的主机名
    将ArrayList设为wpf的数据源
    WPF的DataGrid中DataGridHyperlinkColumn的用法
  • 原文地址:https://www.cnblogs.com/s313139232/p/9995817.html
Copyright © 2011-2022 走看看