js導出table表格到excel表格中

1、背景

首先呢,這次是我最近在寫個需求,前面我有提到過導出excel用java代碼導出,但是這樣寫代碼比較繁瑣,而且如果帶有很複雜的格式要求,看着就腦仁疼。所以我就想到了在前端直接導出來。下面開始

2、步驟

首先我呢做了很多百度細節,有非常多的,我大概總結了一些在前端導出我遇到的問題。首先你會遇到兼容性的問題。然後就是安全性問題,還有文檔打開的時候會有明顯提升文件缺失或者損壞。還有就是如果你樣式寫非常複雜也會導出有一定差異。最後就是如果這些你都不在乎,下面我的代碼你可能會用到,我百度了很多代碼這是相對比較好的。

第一份,這份比較不錯我就是在項目中用的這份代碼:

//判斷是否IE瀏覽器
  function isIE() {
  if (!!window.ActiveXObject || "ActiveXObject" in window) {
   return true;
  } else {
   return false;
  }
 } 
 
   function method() {
      var lHtml = document.getElementById("myDiv").innerHTML;
      var tableHtml='<html><head><meta charset="UTF-8"></head><body>';
   tableHtml += lHtml;
   tableHtml += '</body></html>';
   var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
   var fileName = "EXCEL.xls";
   if(isIE()){
   window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
   }else{
   var oa = document.createElement('a');
   oa.href = URL.createObjectURL(excelBlob);
   oa.download = fileName;
   document.body.appendChild(oa);
   oa.click();
  }
   

使用的時候    var lHtml = document.getElementById("myDiv").innerHTML;

修改一下這裏的ID,直接調用table表格包起來的DIV。注意一點,這裏table標籤需要一個div包起來。

下面是第二份。

 //第五種方法
        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 method5(tableid) {
            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)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,',
                    template = '<html><head><meta charset="UTF-8"></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))
            }
        })()

 

使用的時候調用method5(tableid)     就行了

tableid  就是table表格的ID

下面我需要告訴大家的是這裏table表格如果沒有加 border標籤是 不會顯示線條的

所以我一般會選擇加上線條粗細爲1  縫隙爲0的標籤

<table border="1" cellspacing="0"> 

3、總結

其實很近沒更新文章了,主要是技術點get不深不能胡編亂造,然後就是最近確實工作比較 多。這次也是遇到了個需求,正好我以前又使用過前端直接導出,就想到了這個簡便的方案,但是缺點的很明顯,前面也說了。文件會缺損。應爲excel軟件可以識別頁面標籤,但是比較他不是瀏覽器,識別起來有限。打開肯定會遇到兼容性問題。xlsx後綴你導出來就肯定打不開。然後就是瀏覽器兼容性問題。所以使用java代碼poi導出確實是比較安全和比較合理的方式,但是工作量會很大。看選擇唄。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章