前端JavaScript写Excel的代码示例

2020-11-27 来源：易榕旅网

本篇文章给大家带来的内容是关于前端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的代码示例