JS将html导入excel方法

来源:互联网 发布:阿里云数据库 ads 编辑:程序博客网 时间:2024/06/15 06:32

一.导出为CSV文件:

    直接将数据加上逗号“,” 按照逗号分隔符导出成csv表,缺点就是不能进行背景色修改这些样式。

直接贴代码:

//写入CSV
html:
  <button id="export_teardown" class="btn btn-default btn-success" style="margin-left: 8px">导出表格</button>

js:
 $('#export_teardown').click(function(){
           TabletoCsv()
        })
        //导出CSV表格
        function TabletoCsv() {
            user_num = $('.eip_release_tablediv .panel-group .panel').length
            user_str = ""
            console.log(user_num)
            for(i=0; i<user_num; i++){
                user_name = $('.user_name')[i].innerText.trim()
                email = $('.email')[i].innerText.trim()
                notify_email = $('.notify_email')[i].innerText.trim()
                phone = $('.phone')[i].innerText.trim()
                company_name = $('.company_name')[i].innerText.trim()
                var user_title = "用户名" + ',' + "登录邮箱" + ',' + "通知邮箱" + ',' + "手机号" + ',' + "公司名" + '\n'
                var str = user_name + ',' + email + ',' + notify_email + ',' + phone + ',' + company_name + '\n'
                var tear_down_usr_title = "区域" + ',' + "主机ID" + ',' + "主机名" + ',' + "镜像名" + ',' + "镜像ID" + ',' + "迁移时间" + ',' + "迁移状态" + '\n'
                var tear_down_tr_num = $('.panel').find("tbody")[i].children.length
                var std = ""
                for(j=0;  j<tear_down_tr_num; j++){
                    var tear_down_td= $('.panel').find("tbody")[i].children[j].children
                    for(k=0; k<tear_down_td.length; k++){
                        td = tear_down_td[k].innerText.trim() + ','
                        std = std + td

                    }
                    std = std + '\n'
                }

                var user_info = user_title + str + tear_down_usr_title + std + '\n'
                user_str = user_str + user_info
            }

            str = encodeURIComponent(user_str)
            console.log(str)
            var temp = document.createElement("a")
            temp.style.display = "none"
            temp.download = "导出表格.csv"
            temp.href = "data:text/csv;charset=utf-8,\ufeff" + str
            temp.click()

            return temp
        }


二.导出成EXCEL表

  将数据封装成table,带样式导出成excel。

直接上代码:

//写入EXCEL
html:
button id="export_teardown" onclick="ToExcel()" class="btn btn-default btn-success" style="margin-left: 8px">导出表格>
js:
  //导出excel
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                console.log(explorer)
                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 ToExcel(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,',

            user_num = $('.eip_release_tablediv .panel-group .panel').length
            user= ""
            console.log(user_num)
            for(i=0; i<user_num; i++){
                user_name = $('.user_name')[i].innerText.trim()
                email = $('.email')[i].innerText.trim()
                notify_email = $('.notify_email')[i].innerText.trim()
                phone = $('.phone')[i].innerText.trim()
                company_name = $('.company_name')[i].innerText.trim()

                var user_title = "<tr><td style='background-color:rgb(221,235,247)'>用户名</td>" + "<td style='background-color:rgb(221,235,247)'>登录邮箱</td>" + "<td style='background-color:rgb(221,235,247)'>通知邮箱</td>" + "<td style='background-color:rgb(221,235,247)'>手机号</td>"  + "<td style='background-color:rgb(221,235,247)'>公司名</td>" + "<td style='background-color:rgb(221,235,247)'></td><td style='background-color:rgb(221,235,247)'></td></tr>"
                var str = "<tr><td style='background-color:rgb(221,235,247)'>" + user_name + '</td><td style=\'background-color:rgb(221,235,247)\'>' + email + '</td><td style=\'background-color:rgb(221,235,247)\'>' + notify_email + '</td><td style=\'background-color:rgb(221,235,247)\'>' + phone + '</td><td style=\'background-color:rgb(221,235,247)\'>' + company_name + '</td><td style=\'background-color:rgb(221,235,247)\'></td><td style=\'background-color:rgb(221,235,247)\'></td></tr>'
                var tear_down_usr_title = "<tr><td>区域</td>" + "<td>主机ID</td>"+ "<td>主机名</td>"  + "<td>镜像名</td>"  + "<td>镜像ID</td>" + "<td>迁移时间</td>" + "<td>迁移状态</td></tr>"
                var tear_down_tr_num = $('.panel').find("tbody")[i].children.length
                var std = ""
                for(j=0;  j<tear_down_tr_num; j++){
                    var tear_down_td= $('.panel').find("tbody")[i].children[j].children
                    for(k=0; k<tear_down_td.length; k++){
                        td = '<td>' + tear_down_td[k].innerText.trim() + '</td>'
                        std = std + td

                    }
                    std = std + '<tr>'
                }
{##}

                var user = user + user_title + str + tear_down_usr_title + std
            }
            table = user
            template = '<html><head><meta charset="UTF-8"></head><body><table border="1">'+ 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) {
                window.location.href = uri + base64(format(template))
            }
        })()