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

初辰ge

已于 2023-11-02 15:45:56 修改

阅读量495

点赞数 1

分类专栏： JavaScript

于 2022-11-30 16:47:53 首次发布

本文链接：https://blog.csdn.net/chuenst/article/details/128118002

版权

JavaScript Excel导出无插件 npm p-export-excel

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

纯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 + " style=" + th[h].style + " align=" + th[h].align + ">" + 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 + " style=" + td[d].style + " align=" + td[d].align + ">" + 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||"sheet1";
    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);
}

后来我给封装成了插件p-export-excel，可以在npm中安装npm i p-export-excel