网页上直接将html表格导出为csv

index.html

<script src="export_html_table_csv.js"></script>

<div class="auto_table">
    <script>
        if(typeof openNewTargetHtml == "undefined") {
            function openNewTargetHtml(thiss){
                var html = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.innerHTML;
                var newwindow = window.open("", "_blank","");
                newwindow.document.write(html);
            }
        }
    </script>
    <script>
        if(typeof exportCSV == "undefined") {
            function exportCSV(thiss){
                var tableObj = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.firstElementChild;
                downloadCSV(tableObj,'aa.csv');
            }
        }
    </script>


    <style>
        tr,td{
            border: 1px solid #9E9E9E;
            text-align: center;
        }
        table>thead>tr>td{
            padding: 10px;
        }
        table>tbody>tr>td{
            border: 1px solid #9E9E9E;
        }
        table>tbody>tr{
            border: 1px solid #9E9E9E;
        }
    </style>
    <script>
        if(typeof openNewTargetHtml == "undefined") {
            function openNewTargetHtml(thiss){
                var html = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.innerHTML;
                var newwindow = window.open("", "_blank","");
                newwindow.document.write(html);
            }
        }
    </script>

    <style>
        tr,td{
            border: 1px solid #9E9E9E;
            text-align: center;
        }
        table>thead>tr>td{
            padding: 10px;
        }
        table>tbody>tr>td{
            border: 1px solid #9E9E9E;
        }
        table>tbody>tr{
            border: 1px solid #9E9E9E;
        }
    </style>
    <table class="MsoNormalTable"  border="0" cellspacing="0" cellpadding="0" style="margin: 10px; padding-left: 50%;border-collapse:collapse;font-size: larger;" ><thead><tr><td>用户访问历史 <font style="color: red;">(9)rows </font> <button type="button" onclick="openNewTargetHtml(this)">新标签页打开</button> <button type="button" onclick="exportCSV(this)">导出CSV</button></td></tr></thead><tbody><tr><td>

        <table class="MsoNormalTable"  border="0" cellspacing="0" cellpadding="0" style="margin: 10px; padding-left: 50%;border-collapse:collapse;font-size: larger;" ><thead><tr><td>id</td><td>标""题</td><td>访问时间</td></tr></thead><tbody><tr><td>1333820</td><td>我的\",\"课程</td><td>2020-08-31 21:01:17</td></tr><tr><td>1244314</td><td>如何实现全赢人生 - 奇迹30</td><td>2020-08-29 20:42:20</td></tr><tr><td>1244309</td><td>支付完成</td><td>2020-08-29 20:42:06</td></tr><tr><td>1244305</td><td>支付,订单</td><td>2020-08-29 20:41:55</td></tr><tr><td>1244304</td><td>支付订单</td><td>2020-08-29 20:41:55</td></tr><tr><td>1244299</td><td>如何实现全赢人生 - 奇迹30</td><td>2020-08-29 20:41:41</td></tr><tr><td>1244294</td><td>课程券中心</td><td>2020-08-29 20:41:25</td></tr><tr><td>1243967</td><td>首页</td><td>2020-08-29 20:32:13</td></tr><tr><td>1243960</td><td>奇迹30</td><td>2020-08-29 20:32:07</td></tr></tbody></table></td></tr></tbody></table></div>
<style>
    table{
        display: inline-table;
    }
</style>

export_html_table_csv.js 文件

if (typeof downloadCSV == "undefined") {
    function downloadCSV(tableid, title) {
        var winname;
        try {
            if (navigator.userAgent.indexOf("MSIE") > 0) { //IE浏览器
                alert("该功能为兼容 IE浏览器, 请使用谷歌浏览器");
            } else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //Firefox
                alert("该功能为兼容 Firefox, 请使用谷歌浏览器");
            } else { //Google Chrome
                //alert("Google Chrome等浏览器");
                var str = getTableData(tableid, this);
                //支持中文
                var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                var downloadLink = document.createElement("a");
                downloadLink.href = uri;
                downloadLink.download = title + ".csv";
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        } catch (e) {
            alert(e.Message);
            return false;
        }
        return false;
    }
}

if (typeof getTblData == "undefined") {
    // 传入html中的table对象
    function getTableData(curTbl, inWindow) {
        var rows = 0;
        var tblDocument = document;
        tblDocument = eval(inWindow).document;
        // var curTbl = tblDocument.getElementById(inTbl);
        var outStr = "";
        var rowStr = "";
        if (curTbl != null) {
            for (var j = 0; j < curTbl.rows.length; j++) {
                for (var i = 0; i < curTbl.rows[j].cells.length; i++) {

                    if (i == 0 && rows > 0) {
                        outStr += ",";
                        rows -= 1;
                    }
                    rowStr = curTbl.rows[j].cells[i].innerText;
                    if (rowStr.indexOf('"') != -1) {
                        rowStr = rowStr.replace(/"/g, '""');
                        rowStr = '"' + rowStr + '"';
                    } else if (rowStr.indexOf(',') != -1) {
                        rowStr = '"' + rowStr + '"';
                    }
                    outStr += rowStr + ",";
                    if (curTbl.rows[j].cells[i].colSpan > 1) {
                        for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                            outStr += ",";
                        }
                    }
                    if (i == 0) {
                        if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                            rows = curTbl.rows[j].cells[i].rowSpan - 1;
                        }
                    }
                }
                outStr += "\r\n";//换行
            }
        } else {
            outStr = null;
            alert(allPage.noData);
        }
        return outStr;
    }
}