纯前台js实现导出excel表

淩亂°似流年 2023-06-23 13:19 38阅读 0赞

前台将数据展示到页面上  如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70][]

将table表的id传入ExportToExcel方法中即可

>     //jQuery HTML导出Excel文件(兼容IE及所有浏览器)
>     function ExportToExcel(tableid) {
>         filename = "能力信息";
>         if (getExplorer() == 'ie' || getExplorer() == undefined) {
>             HtmlExportToExcelForIE(tableid, filename);
>         }else {
>             HtmlExportToExcelForEntire(tableid, filename)
>         }
>     }
>     //IE浏览器导出Excel
>     function HtmlExportToExcelForIE(tableid, filename) {
>         try {
>             var winname = window.open('', '_blank', 'top=10000');
>             var strHTML = document.getElementById(tableid).innerHTML;
>     
>             winname.document.open('application/vnd.ms-excel', 'export excel');
>             winname.document.writeln(strHTML);
>             winname.document.execCommand('saveas', '', filename + '.xls');
>             winname.close();
>     
>         } catch (e) {
>             alert(e.description);
>         }
>     }
>     
>     //非IE浏览器导出Excel
>     var HtmlExportToExcelForEntire = (function() {
>         var uri = 'data:application/vnd.ms-excel;base64,',
>             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></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 }
>             document.getElementById("dlink").href = uri + base64(format(template, ctx));
>             document.getElementById("dlink").download = name + ".xls";
>             document.getElementById("dlink").click();
>         }
>     })()
>     
>     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';
>         }
>     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219142922367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ==,size_16,color_FFFFFF,t_70