【前端工具】使用JS实现一个Excel报表导出工具包，支持导出大数据量（5种方法总结）

方法一：ActiveXObject的导出方式

//第一种方法
function method1(tableid) {

    var curTbl = document.getElementById(tableid);
    var oXL = new ActiveXObject("Excel.Application");
    var oWB = oXL.Workbooks.Add();
    var oSheet = oWB.ActiveSheet;
    var sel = document.body.createTextRange();
    sel.moveToElementText(curTbl);
    sel.select();
    sel.execCommand("Copy");
    oSheet.Paste();
    oXL.Visible = true;

}

//第二种方法
function method2(tableid) {
    var curTbl = document.getElementById(tableid);
    var oXL = new ActiveXObject("Excel.Application");
    var oWB = oXL.Workbooks.Add();
    var oSheet = oWB.ActiveSheet;
    var Lenr = curTbl.rows.length;
    for (i = 0; i < Lenr; i++) {
        var Lenc = curTbl.rows(i).cells.length;
        for (j = 0; j < Lenc; j++) {
            oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
        }

    }
    oXL.Visible = true;
}

上面的代码优化

//第三种方法
 function getXlsFromTbl(inTblId, inWindow) {

     try {
         var allStr = "";
         var curStr = "";
         if (inTblId != null && inTblId != "" && inTblId != "null") {

             curStr = getTblData(inTblId, inWindow);

         }
         if (curStr != null) {
             allStr += curStr;
         } else {

             alert("你要导出的表不存在");
             return;
         }
         var fileName = getExcelFileName();
         doFileExport(fileName, allStr);

     } catch (e) {

         alert("导出发生异常:" + e.name + "->" + e.description + "!");

     }

 }

 function getTblData(inTbl, inWindow) {

     var rows = 0;
     var tblDocument = document;
     if (!!inWindow && inWindow != "") {

         if (!document.all(inWindow)) {
             return null;
         } else {
             tblDocument = eval(inWindow).document;
         }

     }

     var curTbl = tblDocument.getElementById(inTbl);
     var outStr = "";
     if (curTbl != null) {
         for (var j = 0; j < curTbl.rows.length; j++) {
             for (var i = 0; i < curTbl.rows[j].cells.length; i++) {

                 if (i == 0 && rows > 0) {
                     outStr += " t";
                     rows -= 1;
                 }

                 outStr += curTbl.rows[j].cells[i].innerText + "t";
                 if (curTbl.rows[j].cells[i].colSpan > 1) {
                     for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                         outStr += " t";
                     }
                 }
                 if (i == 0) {
                     if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                         rows = curTbl.rows[j].cells[i].rowSpan - 1;
                     }
                 }
             }
             outStr += "rn";
         }
     } else {
         outStr = null;
         alert(inTbl + "不存在 !");
     }
     return outStr;
 }

 function getExcelFileName() {
     var d = new Date();
     var curYear = d.getYear();
     var curMonth = "" + (d.getMonth() + 1);
     var curDate = "" + d.getDate();
     var curHour = "" + d.getHours();
     var curMinute = "" + d.getMinutes();
     var curSecond = "" + d.getSeconds();
     if (curMonth.length == 1) {
         curMonth = "0" + curMonth;
     }

     if (curDate.length == 1) {
         curDate = "0" + curDate;
     }

     if (curHour.length == 1) {
         curHour = "0" + curHour;
     }

     if (curMinute.length == 1) {
         curMinute = "0" + curMinute;
     }

     if (curSecond.length == 1) {
         curSecond = "0" + curSecond;
     }
     var fileName = "table" + "_" + curYear + curMonth + curDate + "_"
         + curHour + curMinute + curSecond + ".csv";
     return fileName;

 }

 function doFileExport(inName, inStr) {
     var xlsWin = null;
     if (!!document.all("glbHideFrm")) {
         xlsWin = glbHideFrm;
     } else {
         var width = 6;
         var height = 4;
         var openPara = "left=" + (window.screen.width / 2 - width / 2)
             + ",top=" + (window.screen.height / 2 - height / 2)
             + ",scrollbars=no,width=" + width + ",height=" + height;
         xlsWin = window.open("", "_blank", openPara);
     }
     xlsWin.document.write(inStr);
     xlsWin.document.close();
     xlsWin.document.execCommand('Saveas', true, inName);
     xlsWin.close();

 }

方法三：支持浏览器适配的导出方式(IE+其他浏览器)

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 = '{table}',
        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))
    }
})()

方法四：以Table格式导为xls文件

// 第六种写法
function TableToExcel() {
    //要导出的json数据
    var jsonData = [
        {
            name: '001',
            id: '621699190001011231'
        },
        {
            name: '002',
            id: '52069919000101547X'
        },
        {
            name: '003',
            id: '423699190103015469'
        },
        {
            name: '004',
            id: '341655190105011749'
        }
    ]
    //导出前要将json转成table格式
    //列标题
    var str = 'nameid';
    //具体数值 遍历
    for (let i = 0; i < jsonData.length; i++) {
        str += '';
        for (let item in jsonData[i]) {
            var cellvalue = jsonData[i][item];
            //不让表格显示科学计数法或者其他格式
            //方法1 tr里面加 style="mso-number-format:'\@';" 方法2  是改为 = 'XXXX'格式
            //如果纯数字且超过15位
            /*var reg = /^[0-9]+.?[0-9]*$/;
            if ((cellvalue.length>15) && (reg.test(cellvalue))){
                //cellvalue = '="' + cellvalue + '"';
            }*/
            //此处用`取代'，具体用法搜索模板字符串 ES6特性
            str += `${cellvalue}`;
            // str+=`${cellvalue}`;
        }
        str += '';
    }
    var worksheet = '导出结果'
    var uri = 'data:application/vnd.ms-excel;base64,';
    //下载的表格模板数据
    var template = `
          
            ${str}`;

    //下载模板
    function base64(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    }

    // window.location.href = uri + base64(template);
    var a = document.createElement('a');
    a.href = uri + base64(template);
    a.download = 'export_' + Date.now() + '.xls';
    a.click();
}

function toCSV() {
    //要导出的json数据
    var jsonData = [
        {
            name: '001',
            id: '621699190001011231'
        },
        {
            name: '002',
            id: '52069919000101547X'
        },
        {
            name: '003',
            id: '423699190103015469'
        },
        {
            name: '004',
            id: '341655190105011749'
        }
    ]
    //导出前要将json转成table格式
    //列标题
    var str = 'name,id\n';
    //具体数值 遍历
    for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {

            //增加\t为了不让表格显示科学计数法或者其他格式
            //此处用`取代'，具体用法搜索模板字符串 ES6特性
            str += `${jsonData[i][item] + '\t,'}`;
        }
        str += '\n';
    }
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    var link = document.createElement("a");
    link.href = uri;
    link.download = "导出.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

方法五：导出为CSV格式[高效推荐]

支持大批量数据导出，目前测试15万行 30列通过，导出时间约为6秒

function toLargerCSV() {
    //CSV格式可以自己设定，适用MySQL导入或者excel打开。
    //由于Excel单元格对于数字只支持15位，且首位为0会舍弃 建议用 =“数值”

    var str = '行号,内容,题目,标题\n';

    var dt1 = Date.now();

    // 这块放到worker中去实现
    for (let i = 0; i < 10000000; i++) {
        str += i.toString() + ',1234567890123456789\t,张三李四王五赵六,bbbb,\n'
    }

    // 转换为标准格式
    for (let i = 0; i < 10000000; i++) {
        // ...
    }

    var blob = new Blob([str], {type: "text/plain;charset=utf-8"});
    //解决中文乱码问题
    blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
    object_url = window.URL.createObjectURL(blob);
    var link = document.createElement("a");
    link.href = object_url;
    link.download = "导出.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    var dt2 = Date.now();
    console.log('handleed time', (dt2 - dt1) / 1000);
}