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

Posted 2023-02-13 初辰ge

tags:

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

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

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

let thlist = [
    [
        text: '序号', rowspan: '2',
        text: '姓名', rowspan: '2',
        text: '手机号', rowspan: '2',
        text: '考勤课时', rowspan: '2',
        text: '学习课时', rowspan: '2',
        text: '直播课时', rowspan: '2',
        text: '录播课时', rowspan: '2'
    ]
]
let tdlist = []
let objInfo = 
    fileName: '课时记录表',
    theadList: thlist,
    tbodyList: tdlist

toExcel(objInfo)

function toExcel(objInfo) 
    let obj = 
        fileName: objInfo.fileName || '文件名',
        FootName: objInfo.FootName || 'sheet1',
        theadList: objInfo.theadList || [],
        tbodyList: objInfo.tbodyList || []
    
    let excel = '<table style="font-size:15px;font-family:Microsoft YaHei;vnd.ms-excel.numberformat:@">';
    for (let i = 0; i < obj.theadList.length; i++) 
        excel += "<tr align='center'>"
        let th = obj.theadList[i]
        for (let h = 0; h < th.length; h++) 
            excel += "<th colspan=" + th[h].colspan + " rowspan=" + th[h].rowspan + ">" + th[h].text + "</th>"
        
        excel += "</tr>";
    
    for (let i = 0; i < obj.tbodyList.length; i++) 
        excel += "<tr align='center'>"
        let td = obj.tbodyList[i]
        for (let d = 0; d < td.length; d++) 
            excel += "<td colspan=" + td[d].colspan + " rowspan=" + td[d].rowspan + ">" + td[d].text + "</td>"
        
        excel += "</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 += obj.FootName;
    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 url = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    var link = document.createElement("a");
    link.href = url;
    link.style = "visibility:hidden";
    link.download = obj.fileName + ".xlsx";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

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

纯前端vue框架实现excel 导出

jquery.fileDownload.js插件导出excel

Vue插件之导出EXCEl