码上快乐

相关内容   简体   繁体

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