jquery4种导出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的话欢迎大家指正修改

posted @   大da脸  阅读(4066)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示