HTML 打印table分页

最新推荐文章于 2023-12-25 11:52:20 发布

坐在门前吸烟看雨落

最新推荐文章于 2023-12-25 11:52:20 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Yxh_255/article/details/129499200

版权

/**
 * 构造打印的excel
 * */
function buildPrintExcel(data,boxNo){

    //这一步是重点，添加分页样式
    let html ="<head>" +
            "    <style>" +
            "        @media print" +
            "        {" +
            "            table { page-break-after:auto }" +
            "            tr    { page-break-inside:avoid; page-break-after:auto }" +
            "            td    { page-break-inside:avoid; page-break-after:auto }" +
            "            thead { display:table-header-group }" +
            "            tfoot { display:table-footer-group }" +
            "        }" +
            "    </style>\n" +
            "</head>";
     html += "<div style='width: 900px;margin: 0 auto;'>"+
                "<table style='border-collapse: collapse;width:100%;' border='1' id='table' page-break-after:auto>" +
                "<div style='height: 70px;border: 1px solid black;border-bottom: none;'>" +
                    "<h3 style='text-align: center;height: 20px;margin: 0 0;margin-top: 20px;'>"+ xxxx+ "</h3>"+
                    "<p style='height: 20px;width: 30%;margin: 0 0;float: right;font-size: 15px'>xx号："+ xxx +"</p>"+
                "</div>"+
                "<tr style='height:30pt;' id='title'>" +
                    "<td style='text-align: center; width: 5%;font-size: 15px'>序号</td>" +
                    "<td style='text-align: center; width: 10%;font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center;  width: 15%;font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center; font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center; width: 10%;font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center;  width: 5%;font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center;  width: 5%;font-size: 15px'>xxx</td>" +
                    "<td style='text-align: center; width: 15%;font-size: 15px'>xxx</td>" +
                "</tr>";
    let str = "";
    let trL = "<td style='text-align: center;font-size: 14px'>";
    let trR = "</td>";
    debugger
    for (let i = 0; i < data.length; i++) {
        let info = data[i];
        str +="<tr style='height: 30px'>"
        //序号
        str += trL + (i + 1) + trR;
        str += trL + isNull(info.xxx) + trR;
        str += trL + isNull(info.xxx)  + trR;
        str += trL + isNull(info.xxx)  + trR;
        str += trL + isNull(info.xxx)  + trR;
        str += trL + isNull(info.xxx)  + trR;
        str += trL + isNull(info.xxx)  + trR;
        str += trL + isNull(info.xxx)  + trR;
        str +="</tr>";
    }

    html += str +"</table></div>";

    var newWindow = window.open("打印窗口", "_blank");
    //打印内容写入newWindow文档
    newWindow.document.write(html);
    //关闭文档
    newWindow.document.close();
    //调用打印机
    newWindow.print();
    //关闭newWindow页面
    newWindow.close();
}

function json2obj(json) {
    let result = null;
    if (typeof (json) != "object") {
        result = eval('(' + json + ')');
    }
    else
    {
        result = json;
    }
    return result;
}

function isNull(data){
    if(0 == data){
        return data;
    }
    if(null == data || "" == data){
        return "";
    }
    return data;
}