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导出确实是比较安全和比较合理的方式,但是工作量会很大。看选择呗。

发布了27 篇原创文章 · 获赞 11 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览