前端JavaScript寫Excel的程式碼範例
- 不言轉載
- 2019-03-25 14:29:232743瀏覽
這篇文章帶給大家的內容是關於前端JavaScript寫Excel的程式碼範例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
前端如何寫excel，其實也是比較簡單的，只是沒有接觸這一塊，當然這邊講的只是簡單的入門。
這邊主要講述2種方式，一種是支援主流瀏覽器，一種是支援Ie瀏覽器
主流瀏覽器
這邊主要是使用data協議，透過data協定解析excel的Contenttype（application/vnd.ms-excel）
所以這邊格式就是'data: Content-type; 內容'
excel的內容格式是有模版的如下：
<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>
<meta charset="UTF-8"><!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>sheet</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook></xml>
</head>
<body>
{tableData}
</body>
</html>
然後就是就是根據上述模板進行創建即可,以下就是通過這種方式直接導出excel
(function() {
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><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>{tableData}</body></html>'
var Excel_URL = 'data:application/vnd.ms-excel;base64,'
var Excel = {
ToExcel: function (data) {
var isIe = window.navigator.userAgent.toLocaleUpperCase().indexOf('trident')
if (isIe !== -1) {
this._IEExport(data)
} else {
this._otherExport(data)
}
},
_otherExport: function (data) {
var content = ''
if (typeof data === 'string') {
// 传入id，获取table的内容
var ele = document.querySelector(data)
content = template.replace('{tableData}', ele.outerHTML)
} // else可以做更多操作
var aEle = document.createElement('a')
aEle.href = Excel_URL + window.btoa(unescape(encodeURIComponent(content)))
aEle.download = '测试.xls'
aEle.click()
}
}
window.Excel = Excel
})()
IE瀏覽器
IE下主要就是使用ActiveXObject來實現的：具體見如下程式碼
(function() {
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><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>{tableData}</body></html>'
var Excel_URL = 'data:application/vnd.ms-excel;base64,'
var Excel = {
ToExcel: function (data) {
var isIe = window.navigator.userAgent.toLocaleUpperCase().indexOf('trident')
if (isIe !== -1) {
this._IEExport(data)
} else {
this._otherExport(data)
}
},
_IEExport: function (data) {
// 打开excel
var oXL = new ActiveXObject('Excel:Application')
// 新建工作博
var oWB = oXL.WorkBooks.Add()
// 激活新建工作博
var oSheet = oWB.ActiveSheet
if (typeof data === 'string') {
// table id
var table = document.querySelector(data)
// 创建一个装内容的容器
var sel = document.body.createTextRange()
// 将table中的内容移入容器
sel.moveToElementText(table)
// 选中移入的内容
try {
console.log(sel.select)
sel.select()
} catch (e) {
console.log(e)
}
// 复制容器中的内容
sel.execCommand("Copy")
// 黏贴到excel工作簿中
oSheet.Paste()
}
// 关掉Excel
var filename = oXL.Application.GetSaveAsFilename('test.xls', 'Excel Spreadsheet (*.xls),*.xls')
// 保存工作簿
oWB.SaveAs(filename)
oWB.close()
oXL.quit()
}
}
window.Excel = Excel
})()
這邊剛學習，要製作好的excel還是需要更深入的去了解API才行
本篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！
#以上是前端JavaScript寫Excel的程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除