纯js、jq导出Excel表格文件

最新推荐文章于 2024-09-25 14:01:36 发布

分享点

最新推荐文章于 2024-09-25 14:01:36 发布

阅读量4k

点赞数

分类专栏： jq/js 文章标签： jq

jq/js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//FileName 生成的Excel文件名称
//ShowLabel 生成的Excel文件列标题
//JSONData 生成的Excel文件内容
function toExcel(FileName, ShowLabel, JSONData) {
    //先转化json
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var excel = '<table>';
    //设置表头
    var 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>";
                    //vnd.ms-excel.numberformat:@ 输出为文本
                }
            }
        }
        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 += "{worksheet}";
    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);
}

//调用方法
$("#btnExport").on("click",function(){
    var FileName = "检验单";
    var ShowLabel= [{ inspect_item_name: '检验项目' }, { type: '类型' }, { sn: 'SN' }, { result: '结果' }];
    var JSONData= [{ inspect_item_name: '功能' }, { type: '常规' }, { sn: '123456789' }, { result: 'Fail' },
        { inspect_item_name: '功能' }, { type: '常规' }, { sn: '123456789' }, { result: 'Fail' },
        { inspect_item_name: '功能' }, { type: '常规' }, { sn: '123456789' }, { result: 'Fail' },
        { inspect_item_name: '功能' }, { type: '常规' }, { sn: '123456789' }, { result: 'Fail' }];

    //导出
    toExcel(FileName,ShowLabel,JSONData);
});

//原文地址：https://www.jianshu.com/p/c19e2d4ae397