js前端导出Excel（可自定义文件名称，后缀，有边框样式）_前端导出时候可以定义文件的后缀名吗-CSDN博客

本文链接：https://blog.csdn.net/QiaoRui_/article/details/78018809

需求：

要求把项目中的table表格导出Excel

需求分析及解决：

既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出，也可以是后端导出（技术包括POI或者报表工具等），这篇文章主

要是网上找的前端导出，既然是前端导出又是报表就需要有数据，所以数据都需要你提前做好相应填充

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="GBK"> 
    <title>html 表格导出道</title> 
    <script language="JavaScript" type="text/javascript"> 
        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 exportExcel(tableid,name,filename) { 
            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,name,filename) 
            } 
        } 
        function Cleanup() { 
            window.clearInterval(idTmr); 
            CollectGarbage(); 
        } 
        var tableToExcel = (function() { 
            var uri = 'data:application/vnd.ms-excel;base64,', 
            //Excel样式代码
            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><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
                        +'<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
                        +'</x:ExcelWorkbook></xml><![endif]-->'+
                        ' <style type="text/css">'+
                        '.excelTable  {'+
                        'border-collapse:collapse;'+
                         ' border:thin solid #999; '+
                        '}'+
                        '   .excelTable  th {'+
                        '   border: thin solid #999;'+
                        '  padding:20px;'+
                        '  text-align: center;'+
                        '  border-top: thin solid #999;'+
                        ' background-color: #E6E6E6;'+
                        ' }'+
                        ' .excelTable  td{'+
                        ' border:thin solid #999;'+
                        '  padding:2px 5px;'+
                        '  text-align: center;'+
                        ' }</style>'+
                        '</head><body ><table class="excelTable">{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,filename) { 
                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 = filename;
                document.getElementById("dlink").click();
            } 
        })() 
   
    </script> 
</head> 
<body>   
       
    <div >    
            
        <button type="submit" οnclick="exportExcel('tableExcel','','111.xlsx')" class="btn btn-primary" style="float:right;">
　　　　<a id="dlink" href="" style="display: none;"></a><i class="fa fa-download  "></i> 导出表格</button>
    </div>    
    <div id="myDiv">    
    <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">    
        <tr>    
            <td colspan="5" align="center">html 表格导出道Excel</td>    
        </tr>    
        <tr>    
              
            <td>列标题</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>    
    </body>    
    </html>