溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用JavaScript所見(jiàn)即所得的生成Excel表格

發(fā)布時(shí)間：2020-06-29 11:37:31 來(lái)源：網(wǎng)絡(luò) 閱讀：2403 作者：Red_Ant_hoyl 欄目：web開(kāi)發(fā)

筆者認(rèn)為，解決問(wèn)題的途徑n種，也有很多組合的使用。我們用Excel導(dǎo)出大量數(shù)據(jù)的時(shí)候，可能會(huì)從服務(wù)器端，但如果數(shù)據(jù)量較小，是不是也可以考慮使用JavaScript就可以輕量級(jí)的導(dǎo)出呢。另外實(shí)際工作中，用戶也會(huì)考慮，所見(jiàn)即所得的導(dǎo)出當(dāng)前見(jiàn)到的內(nèi)容到Excel表格中。
這里，筆者有那么一丟丟感想，像文檔數(shù)據(jù)、文件數(shù)據(jù)、圖片數(shù)據(jù)歸根結(jié)底都是一些數(shù)據(jù)碼，而數(shù)據(jù)碼的解析方式也是分多鐘的，像.html的文件可以用記事本、瀏覽器、編輯工具等打開(kāi)。這里筆者就利用Excel能夠打開(kāi)html文檔，投機(jī)取巧了一把后綴名是.xls哦。
JavaScript導(dǎo)出表格三個(gè)弊端：1、只能導(dǎo)出當(dāng)前頁(yè)面；2、若存在大量數(shù)據(jù)，則JavaScript超時(shí)崩潰；3、導(dǎo)出數(shù)據(jù)的同時(shí)，不可以做其他事情。因此，一些正式的、大量的數(shù)據(jù)就不要通過(guò)JavaScript生成了，小打小鬧可以哦。
上代碼嘍，筆者親測(cè)哦：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <table border="1">
        <caption>游戲級(jí)別統(tǒng)計(jì)表</caption>
        <tr>
            <th rowspan="2">序號(hào)</th>
            <th rowspan="2">游戲號(hào)</th>
            <th rowspan="2">姓名</th>
            <th rowspan="2">性別</th>
            <th rowspan="2">年齡</th>
            <th colspan="3">等級(jí)</th>
        </tr>
        <tr>
            <th>lol</th>
            <th>cf</th>
            <th>dnf</th>
            <th>lsd</th>
        </tr>
        <tr>
            <td>1</td>
            <td>20180811</td>
            <td>RedAnt</td>
            <td>男</td>
            <td>不詳</td>
            <td>80</td>
            <td>雙杠一星</td>
            <td>80</td>
            <td>213</td>
        </tr>
        <tr>
            <td>2</td>
            <td>20180812</td>
            <td>HoYL</td>
            <td>男</td>
            <td>不詳</td>
            <td>81</td>
            <td>雙杠一星</td>
            <td>80</td>
            <td>999</td>
        </tr>
        <tr>
            <td>2</td>
            <td>20180813</td>
            <td>Thinking</td>
            <td>男</td>
            <td>不詳</td>
            <td>81</td>
            <td>雙杠一星</td>
            <td>80</td>
            <td>999</td>
        </tr>
    </table>
    <a download="游戲級(jí)別統(tǒng)計(jì)表.xls">導(dǎo)出表格</a>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script>
        $(document).ready(function(){
            var now_html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
            /*outerHTML:獲取整個(gè)table元素的HTML代碼（包括<table>標(biāo)簽）,包裝成一個(gè)完整的HTML文檔
             charset為urf-8以防止中文亂碼*/
            var blob = new Blob([now_html], { type: "application/vnd.ms-excel" });
            /*實(shí)例化一個(gè)Blob對(duì)象
             * Blob構(gòu)造函數(shù):[now_html]包含文件的數(shù)組
             * { type: "application/vnd.ms-excel" }：是包含文件類型屬性的對(duì)象*/
            var a = document.getElementsByTagName("a")[0];
            //利用URL.createObjectURL()方法為a元素生成blob URL
            a.href = URL.createObjectURL(blob);
        })
    </script>
</body>
</html>

演示效果：
利用JavaScript所見(jiàn)即所得的生成Excel表格
利用JavaScript所見(jiàn)即所得的生成Excel表格
沒(méi)有在所有瀏覽器上都調(diào)試哦，筆者認(rèn)為前端的東西至少適配三種內(nèi)核瀏覽器的。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手