純JS將table表格導(dǎo)出到excel的方法
html
<div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE導(dǎo)出Excel方法</button> <button type="button" onclick="method5('tableExcel')">Chrome導(dǎo)出Excel</button> </div> <div id="myDiv"> <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" align="center">html 表格導(dǎo)出到Excel</td> </tr> <tr> <td>列標(biāo)題1</td> <td>列標(biāo)題2</td> <td>類標(biāo)題3</td> <td>列標(biāo)題4</td> <td>列標(biāo)題5</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> <td>eee</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> </tr> <tr> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> </tr> </table> </div>
js
<script language="JavaScript" type="text/javascript"> //IE方法 function getXlsFromTbl(inTblId, inWindow){ try { var allStr = ""; var curStr = ""; if (inTblId != null && inTblId != "" && inTblId != "null") { curStr = getTblData(inTblId, inWindow); } if (curStr != null) { allStr += curStr; } else { alert("你要導(dǎo)出的表不存在"); return; } var fileName = getExcelFileName(); doFileExport(fileName, allStr); } catch(e) { alert("導(dǎo)出發(fā)生異常:" + e.name + "->" + e.description + "!"); } } function getTblData(inTbl, inWindow) { var rows = 0; var tblDocument = document; if (!!inWindow && inWindow != "") { if (!document.all(inWindow)) { return null; } else { tblDocument = eval(inWindow).document; } } var curTbl = tblDocument.getElementById(inTbl); var outStr = ""; 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 += " t"; rows -= 1; } outStr += curTbl.rows[j].cells[i].innerText + "t"; if (curTbl.rows[j].cells[i].colSpan > 1) { for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) { outStr += " t"; } } if (i == 0) { if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) { rows = curTbl.rows[j].cells[i].rowSpan - 1; } } } outStr += "rn"; } } else { outStr = null; alert(inTbl + "不存在 !"); } return outStr; } function getExcelFileName() { var d = new Date(); var curYear = d.getYear(); var curMonth = "" + (d.getMonth() + 1); var curDate = "" + d.getDate(); var curHour = "" + d.getHours(); var curMinute = "" + d.getMinutes(); var curSecond = "" + d.getSeconds(); if (curMonth.length == 1) { curMonth = "0" + curMonth; } if (curDate.length == 1) { curDate = "0" + curDate; } if (curHour.length == 1) { curHour = "0" + curHour; } if (curMinute.length == 1) { curMinute = "0" + curMinute; } if (curSecond.length == 1) { curSecond = "0" + curSecond; } var fileName = "table" + "_" + curYear + curMonth + curDate + "_" + curHour + curMinute + curSecond + ".csv"; return fileName; } function doFileExport(inName, inStr) { var xlsWin = null; if (!!document.all("glbHideFrm")) { xlsWin = glbHideFrm; } else { var width = 6; var height = 4; var openPara = "left=" + (window.screen.width / 2 - width / 2) + ",top=" + (window.screen.height / 2 - height / 2) + ",scrollbars=no,width=" + width + ",height=" + height; xlsWin = window.open("", "_blank", openPara); } xlsWin.document.write(inStr); xlsWin.document.close(); xlsWin.document.execCommand('Saveas', true, inName); xlsWin.close(); } //Chrome方法 var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if(explorer.indexOf("Chrome") >= 0){ return 'Chrome'; } //Opera else if(explorer.indexOf("Opera") >= 0){ return 'Opera'; } //Safari else if(explorer.indexOf("Safari") >= 0){ return 'Safari'; } } function method5(tableid) { if(getExplorer()=='ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); var oWB = oXL.Workbooks.Add(); var xlsheet = oWB.Worksheets(1); var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand("Copy"); xlsheet.Paste(); oXL.Visible = true; try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); oXL.Quit(); oXL = null; idTmr = window.setInterval("Cleanup();", 1); } } else { tableToExcel(tableid) } } function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); } var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>', base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })() </script>
到此這篇關(guān)于純JS將table表格導(dǎo)出到excel的方法的文章就介紹到這了,更多相關(guān)js table表格導(dǎo)出excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript給事件委托批量添加事件監(jiān)聽詳細(xì)流程
事件委托,一般來講,會(huì)把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上,真正綁定事件的是外層元素,當(dāng)事件響應(yīng)到需要綁定的元素上時(shí),會(huì)通過事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上,然后在外層元素上去執(zhí)行函數(shù)2021-10-10正則表達(dá)式基本語法及表單驗(yàn)證操作詳解【基于JS】
這篇文章主要介紹了正則表達(dá)式基本語法及表單驗(yàn)證操作,較為詳細(xì)的分析了正則表達(dá)式的基本語法以及基于JS實(shí)現(xiàn)的表單正則驗(yàn)證操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04JavaScript實(shí)現(xiàn)H5接金幣功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)H5接金幣功能,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄
最近學(xué)到了一個(gè)比較好用的框架uni-app,可以做六端適配,學(xué)習(xí)一下,下面這篇文章主要給大家介紹了關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄的相關(guān)資料,需要的朋友可以參考下2023-03-03bootstrap table實(shí)現(xiàn)x-editable的行單元格編輯及解決數(shù)據(jù)Empty和支持多樣式問題
本文著重解決x-editable編輯的數(shù)據(jù)動(dòng)態(tài)添加和顯示數(shù)據(jù)為Empty的問題,還有給表格單元格的內(nèi)容設(shè)置多樣式,使得顯示多樣化,需要的朋友可以參考下2017-08-08javascript中RegExp保留小數(shù)點(diǎn)后幾位數(shù)的方法分享
文章介紹一篇關(guān)于javascript中RegExp保留小數(shù)點(diǎn)后幾位數(shù)方法,有需要了解的朋友可以參考一下2013-08-08javascript創(chuàng)建數(shù)組的最簡(jiǎn)代碼
2008-02-02在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測(cè)試成功了,在谷歌瀏覽中沒有測(cè)試成功,其他瀏覽器沒有測(cè)試。2011-02-02