利用JavaScript所見即所得的生成Excel表格

lee_lgw發表於2021-09-09
JavaScriptExcel

筆者認為，解決問題的途徑n種，也有很多組合的使用。我們用Excel匯出大量資料的時候，可能會從伺服器端，但如果資料量較小，是不是也可以考慮使用JavaScript就可以輕量級的匯出呢。另外實際工作中，使用者也會考慮，所見即所得的匯出當前見到的內容到Excel表格中。
這裡，筆者有那麼一丟丟感想，像文件資料、檔案資料、圖片資料歸根結底都是一些資料碼，而資料碼的解析方式也是分多鐘的，像.html的檔案可以用記事本、瀏覽器、編輯工具等開啟。這裡筆者就利用Excel能夠開啟html文件，投機取巧了一把字尾名是.xls哦。
JavaScript匯出表格三個弊端：1、只能匯出當前頁面；2、若存在大量資料，則JavaScript超時崩潰；3、匯出資料的同時，不可以做其他事情。因此，一些正式的、大量的資料就不要透過JavaScript生成了，小打小鬧可以哦。
上程式碼嘍，筆者親測哦：

<!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>遊戲級別統計表</caption>        <tr>            <th rowspan="2">序號</th>            <th rowspan="2">遊戲號</th>            <th rowspan="2">姓名</th>            <th rowspan="2">性別</th>            <th rowspan="2">年齡</th>            <th colspan="3">等級</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="遊戲級別統計表.xls">匯出表格</a>    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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:獲取整個table元素的HTML程式碼（包括<table>標籤）,包裝成一個完整的HTML文件             charset為urf-8以防止中文亂碼*/            var blob = new Blob([now_html], { type: "application/vnd.ms-excel" });            /*例項化一個Blob物件             * Blob建構函式:[now_html]包含檔案的陣列             * { type: "application/vnd.ms-excel" }：是包含檔案型別屬性的物件*/            var a = document.getElementsByTagName("a")[0];            //利用URL.createObjectURL()方法為a元素生成blob URL            a.href = URL.createObjectURL(blob);        })    </script></body></html>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1020/viewspace-2817626/，如需轉載，請註明出處，否則將追究法律責任。

相關文章