纯js导出Excel文件（无需引入插件）

Posted 2022-12-15 初辰ge

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯js导出Excel文件（无需引入插件）相关的知识，希望对你有一定的参考价值。

纯js导出Excel文件（无需引入插件）

提示：代码没有来得及整理，大致代码都在这里

var ShowLabel = [name: '学员姓名', tel: '手机号', es: '理论考试成绩', us: '作业成绩'];
let list = []
for (let i = 0; i < res.data.length; i++) 
    list.push(
        name: res.data[i].realName,
        tel: res.data[i].mobile,
        es: res.data[i].examScore,
        us: res.data[i].userTaskScore
    )

toExcel(className, ShowLabel, list,classObj)

function toExcel(FileName, ShowLabel, JSONData,classObj) 
    //先转化json
    let classTypeText=''
    if(classObj.jobCode==1)
        classTypeText='GYB'
    else if(classObj.jobCode==2)
        classTypeText='SYB'
    
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var excel = '<table>';
    //设置表头
    var row = "<tr align='center'><th colspan='4'>"+classTypeText+"创业培训结业评分册</th>";//设置Excel的左居中
    //换行
    excel += row + "</tr>";
    row = "<tr align='center'><td colspan='4'>模块: "+classTypeText+" 班次："+classObj.trainingShift+" 起止时间："+classObj.startStudyDate.slice(0,10)+"至"+classObj.endStudyDate.slice(0,10)+"</td>";//设置Excel的左居中
    //换行
    excel += row + "</tr>";
    row = "<tr align='left'>";//设置Excel的左居中
    for (var i = 0, l = ShowLabel.length; i < l; i++) 
        for (var key in ShowLabel[i]) 
            row += "<td>" + ShowLabel[i][key] + '</td>';
        
    
    //换行
    excel += row + "</tr>";
    //设置数据
    for (var i = 0; i < arrData.length; i++) 
        var rowData = "<tr align='left'>";
        for (var y = 0; y < ShowLabel.length; y++) 
            for (var k in ShowLabel[y]) 
                if (ShowLabel[y].hasOwnProperty(k)) 
                    rowData += "<td style='vnd.ms-excel.numberformat:@'>" + (arrData[i][k] === null ? "" : arrData[i][k]) + "</td>";
                
            
        
        excel += rowData + "</tr>";
    
    excel += "</table>";
    var excelFile = "<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'>";
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += FileName;
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";
    var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    var link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = FileName+ '评分册' + ".xls";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    $("#downAll i").hide()

以上是关于纯js导出Excel文件（无需引入插件）的主要内容，如果未能解决你的问题，请参考以下文章

纯前端vue框架实现excel 导出

jquery.fileDownload.js插件导出excel

Vue插件之导出EXCEl