碼上歡樂
相關內容    簡體    繁體

jquery4種導出excel方法(已測試)

本文轉載自   查看原文   2018-01-16 09:57   2374    JS導出excel

第一種：（導出格式：csv、txt、excel、word、png）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div>
        <ul class="dropdown-menu">
            <li>
                <a onclick="$('#stats_datatable').tableExport({type:'csv',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
                    導出格式-CSV
                </a>
            </li>
            <li>
                <a onclick="$('#stats_datatable').tableExport({type:'txt',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
                    導出格式-TXT
                </a>
            </li>
            <li>
                <a onclick="$('#stats_datatable').tableExport({type:'excel',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
                    導出格式-Excel
                </a>
            </li>
            <li>
                <a onclick="$('#stats_datatable').tableExport({type:'doc',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
                    導出格式-Word
                </a>
            </li>
            <li>
                <a onclick="$('#stats_datatable').tableExport({type:'png',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
                    導出格式-PNG
                </a>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <table id="stats_datatable" class="table datatable">
            <thead>
                <tr>
                    <th>名稱</th>
                    <th>里程</th>
                    <th>次數</th>
                    <th>天數</th>
                    <th>簽到</th>
                    <th>活動</th>
                    <th>時間周期</th>
                    <th>更新時間</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <!-- START SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 數據表 -->

    <script src="js/tableExport.js"></script>
    <script src="js/mybase.js"></script>
    <script>
        $(function () {
            //=======讓解碼后中文不出現亂碼的方法
            data = $.base64({ data: "已經編碼過后的base64", type: 1, unicode: true });

            //=或
            data = $.base64({ data: "已經編碼過后的base64", type: 1 });
            console.log(data);
            //downloadFile("myexcel.xls", data);
        });
    </script>
</body>
</html>
View Code

第二種：（導出數據量少的情況導出帶樣式的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數據量少的情況導出帶樣式的</title>
    <style>
        table td {
            font-size: 12px;
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: #4f891e;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <a download="table導出Excel" id="excelOut" href="#">table導出Excel</a>
    <table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
        <thead>
            <tr>
                <td>公司一</td>
                <td>公司二一</td>
                <td>公司三</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td colspan="3">共計</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            tableToExcel('tableToExcel', '下載模板')
        };
        //base64轉碼
        var base64 = function (s) {
            return window.btoa(unescape(encodeURIComponent(s)));
        };
        //替換table數據和worksheet名字
        var format = function (s, c) {
            return s.replace(/{(\w+)}/g,
                function (m, p) {
                    return c[p];
                });
        }
        function tableToExcel(tableid, sheetName) {
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<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"><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]-->' +
                ' <style type="text/css">' +
                'table td {' +
                'border: 1px solid #000000;' +
                'width: 200px;' +
                'height: 30px;' +
                ' text-align: center;' +
                'background-color: #4f891e;' +
                'color: #ffffff;' +
                ' }' +
                '</style>' +
                '</head><body ><table class="excelTable">{table}</table></body></html>';
            if (!tableid.nodeType) tableid = document.getElementById(tableid);
            var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML };
            document.getElementById("excelOut").href = uri + base64(format(template, ctx));
        }

    </script>
</body>
</html>
View Code

第三種：（導出數據量稍大，但是附帶的有html標簽未修改完善）

my_tableExcel.js 百度網盤下載地址：https://pan.baidu.com/s/1smU3fTb

<html>
<head>
    <title>Demo Jquery Table2Excel</title>
</head>
<body>
    <table style="width: 100%;" cellpadding=0 cellspacing=0 border="1" id="tblExport">
        <tr>
            <td colspan="5" align="center">
                <h2>成績單</h2>
            </td>
        </tr>

        <tr>
            <td align="center">2</td>
            <td style="background-color: #00CC00;" align="center">Tom</td>
            <td style="background-color: #00adee;" align="center">99</td>
            <td style="background-color: #00CC00;" align="center">85</td>
            <td style="background-color: #00adee;" align="center">80</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td style="background-color: #00CC00;" align="center">Tom</td>
            <td style="background-color: #00adee;" align="center">99</td>
            <td style="background-color: #00CC00;" align="center">85</td>
            <td style="background-color: #00adee;" align="center">80</td>
        </tr>
        <tr>
            <td align="center">1</td>
            <td style="background-color: #00CC00;" align="center">Jone</td>
            <td style="background-color: #00adee;" align="center">90</td>
            <td style="background-color: #00CC00;" align="center">85</td>
            <td style="background-color: #00adee;" align="center">100</td>
        </tr>

        <tr>
            <td align="center">2</td>
            <td style="background-color: #00CC00;" align="center">Tom</td>
            <td style="background-color: #00adee;" align="center">99</td>
            <td style="background-color: #00CC00;" align="center">85</td>
            <td style="background-color: #00adee;" align="center">80</td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <h2>成績單</h2>
            </td>
        </tr>

        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>

        <tr>
            <td colspan="5" align="center">
                <h2>成績單</h2>
            </td>
        </tr>

        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>
        <tr>
            <td style='width:54pt' align="center">編號</td>
            <td style='width:54pt' align="center">姓名</td>
            <td style='width:54pt' align="center">語文</td>
            <td style='width:54pt' align="center">數學</td>
            <td style='width:54pt' align="center">英語</td>
        </tr>

    </table>
    <button id="btnExport">導出為Excel</button>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/my_tableExcel.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnExport").click(function () {//按鈕
            $("#tblExport").tableExport();//方法1需要引用my_tableExcel.js
            //fnExcelReport();//方法2
            //tablesToExcel();//方法3
        });
    });

    function fnExcelReport() {
        var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
        var textRange; var j = 0;
        tab = document.getElementById('tblExport'); // id of table

        for (j = 0 ; j < tab.rows.length ; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
            //tab_text=tab_text+"</tr>";
        }

        tab_text = tab_text + "</table>";
        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
        tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
        {
            txtArea1.document.open("txt/html", "replace");
            txtArea1.document.write(tab_text);
            txtArea1.document.close();
            txtArea1.focus();
            sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
        }
        else                 //other browser not tested on IE 11
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
        return (sa);
    }

    function tablesToExcel() {
        var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
        var textRange; var j = 0;
        tab = document.getElementById('tblExport'); // id of table


        for (j = 0 ; j < tab.rows.length ; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
            //tab_text=tab_text+"</tr>";
        }

        tab_text = tab_text + "</table>";
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
        {
            txtArea1.document.open("txt/html", "replace");
            txtArea1.document.write(tab_text);
            txtArea1.document.close();
            txtArea1.focus();
            sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
        }
        else                 //other browser not tested on IE 11
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
        return (sa);
    }
</script>
</html>
View Code

第四種：（jquery.table2excel.js百度網盤下載：https://pan.baidu.com/s/1jKjA2Nk）

調用方法

$("#table1").table2excel({
                                exclude: ".noExl", //過濾位置的 css 類名
                                filename: "權限清單-" + new Date().getTime() + ".xls" //文件名稱
                            });
View Code

這4種方法也是從網上搜集來的，良心保證親測可用，有BUG的話歡迎大家指正修改


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML用JS導出Excel的五種方法 LODOP導出和寫入excel測試 Jquery ajax請求導出Excel表格 Jquery easyui datagrid 導出Excel(轉) 導出Excel方法（winform或web） DATATABLE 快速導出EXCEL方法 從PHP導出圖片excel的方法 POI導出Excel的三種 workbook的區別 導出大量數據到Excel的一種方式 c# 導出excel的三種方式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM