js table表格导出Excel 设置文件名称

最新推荐文章于 2023-01-10 14:00:23 发布

原创最新推荐文章于 2023-01-10 14:00:23 发布 · 783 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#excel

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用JavaScript在HTML页面上实现表格导出至Excel，包括ie、Firefox、Chrome等浏览器的兼容处理，并演示了如何自定义表格样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、table表格导出

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title>表格导出</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 method1(tableid) {//整个表格拷贝到EXCEL中
    if(getExplorer()=='ie')
    {
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");

        //创建AX对象excel 
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象 
        var xlsheet = oWB.Worksheets(1);
        //激活当前sheet 
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        //把表格中的内容移到TextRange中 
        sel.select();
        //全选TextRange中内容 
        sel.execCommand("Copy");
        //复制TextRange中内容  
        xlsheet.Paste();
        //粘贴到活动的EXCEL中       
        oXL.Visible = true;
        //设置excel可见属性

        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);
            //xls.visible = false;
            oXL.Quit();
            oXL = null;
            //结束excel进程，退出完成
            //window.setInterval("Cleanup();",1);
            idTmr = window.setInterval("Cleanup();", 1);

        }

    }
    else
    {
        tableToExcel(tableid);
    }
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}
var tableToExcel = (function() {
  var filename="统计报告"
    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><meta charset="UTF-8"><!--[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]--></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}
                // window.location.href = uri + base64(format(template, ctx)) //无需设置文件名，打开，去掉下面代码
             var a = document.createElement("a");
            a.download = filename;
            a.href = uri + base64(format(template, ctx));
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
              }
})();
 
 </script> 
</head> 
<body> 
 
<div > 
  
 <button onclick="javascript:method1('tableExcel')">导出EXCEL</button>
</div> 
<div id="myDiv"> 
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> 
 <tr> 
  <td colspan="5" align="center">表格导出Excel</td> 
 </tr> 
 <tr> 
  <td>列标题</td>
  <td>列标题</td>
  <td>列标题</td>
  <td>列标题</td>
  <td>列标题</td> 
 </tr> 
 <tr> 
  <td>1</td> 
  <td>1</td> 
  <td>1</td> 
  <td>1</td> 
  <td>1</td> 
 </tr> 
 <tr> 
  <td rowspan="2">1</td> 
  <td>1</td> 
  <td>1</td> 
  <td colspan="2">1</td>
 </tr> 
 <tr> 
  <td>1</td> 
  <td>1</td> 
  <td>1</td> 
  <td>1</td> 
 </tr> 
</table> 
</div> 
</body> 
</html>

二设置表格样式

template变量添加样式

template=
// 在这里自定义table样式，可以将样式导出到excal表格
                    ' <style type="text/css">' +
                    'table td,table th {' +
                    ' text-align: center;' +
                    ' }' +
                    '</style>' +
                    '</head><body><table>{table}</table></body></html>'