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 = "";
      excelFile += "";
      excelFile += "";
      excelFile += excelContent;
      excelFile += "
"
; excelFile += ""; 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>1td> <td>小明td> <td>19td> tr> <tr> <td>2td> <td>小芳td> <td>20td> tr> <tr> <td>3td> <td>大军td> <td>22td> tr> table> body> html>

**

第二种.jquery插件

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

    
<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>table2exceltitle>    
    <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 Filesspan>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>noExlcode>class的行不会被输出到excel中td>    
                    <td class="danger"><code>noExlcode>class的行不会被输出到excel中td>    
                    tr>    
                    <tr>    
                    <td class="success">这一行会被导出到excel中td>    
                    <td class="success">这一行会被导出到excel中td>    
                    tr>    
                    thead>    
                    <tbody>    
                    <tr>    
                            <td>单元格1-1td>    
                            <td>单元格1-2td>    
                    tr>    
                    <tr>    
                            <td>单元格2-1td>    
                            <td>单元格2-2td>    
                    tr>    
                    <tr>    
                            <td>单元格3-1td>    
                            <td>单元格3-2td>    
                    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('
                    
                    

你可能感兴趣的:(js-jquery)