本篇文章给大家带来的内容是关于前端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才行
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript视频教程栏目！
以上就是前端javascript写excel的代码示例的详细内容。