根据table导出excel

最新推荐文章于 2024-05-11 17:34:04 发布

周爱粥

最新推荐文章于 2024-05-11 17:34:04 发布

阅读量269

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_23282331/article/details/115207998

版权

记录一下excel前台导出

/**
 * 根据json导出excel
 * @param fileName 导出文件名
 * @param columns 标题列
 * @param gridData 导出数据
 * @param thead 表头html
 */
function exportExcelByJson(fileName, columns, gridData, thead) {
    //json
    let exportColumns = typeof columns != 'object' ? JSON.parse(columns) : columns;
    let exportData = typeof gridData != 'object' ? JSON.parse(gridData) : gridData;

    // 拼接数据
    let table = '<table>';

    // 传入表头html不为空使用传入表头，否则根据标题列生成表头
    if (thead){
        table += thead;
    }else {
        //设置表头
        let row = "<tr>";
        exportColumns.forEach(function (column) {
            // 每个单元格都可以指定样式color:red生成出来的就是 红色的字体了.
            row += "<td style='" + column.titleStyle + "'>" + column.text + '</td>';
        })
        //列头结束
        table += row + "</tr>";
    }


    //设置数据
    exportData.forEach(function (item) {
        let row = "<tr>";
        exportColumns.forEach(function (column) {
            let value = item[column.name] ? item[column.name] : "";
            row += '<td style="' + column.dataStyle + '">' + value + '</td>';//将值放入td
        })
        //将td 放入tr,将tr放入table
        table += row + "</tr>";
    })
    //table结束
    table += "</table>";

    exportExcelByTable(fileName, table)
}

/**
 * 根据table导出excel
 * @param fileName 文件名
 * @param table table的dom
 */
function exportExcelByTable(fileName, table) {
    // 拼接html
    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 += table;//将table 拼接
    excelFile += "</body>";
    excelFile += "</html>";

    var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

    //创建a标签
    var link = document.createElement("a");
    //指定url
    link.href = uri;
    //设置为隐藏
    link.style = "visibility:hidden";
    //指定文件名和文件后缀格式
    link.download = fileName + ".xls";
    //追加a标签
    document.body.appendChild(link);
    //触发点击事件
    link.click();
    //移除a标签
    document.body.removeChild(link);
}

周爱粥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据table导出excel

/** * 根据json导出excel * @param fileName 导出文件名 * @param columns 标题列 * @param gridData 导出数据 * @param thead 表头html */function exportExcelByJson(fileName, columns, gridData, thead) { //json let exportColumns = typeof columns != 'object' ? JSON.pa.
复制链接

扫一扫