JS 打印——table表格

//js部分—— 打印数据
function PrintingData() {
    var row = $('#EquBasisGrid').datagrid("getSelected");
    if (row == null) {
        $.messager.alert("系统提示", "请选择一行你需要打印的备件加工记录", "info");
        return false;
    }
    app.DataRequest("GetOutsourceById", { id: row.EQ_OUTSOURCEREPAIRID }, function (data) {
        if (data) {
            row.MAINTENNATURE = data.MAINTENNATURE;//维修性质
            row.MAINTENREASON = data.MAINTENREASON;//维修事由
            row.APPLICATIONDATE = app.DateFormat(row.APPLICATIONDATE.replace(/-/g, "/"), 'yyyy-MM-dd HH:mm');
            row.APPDEPTAUDITDATE = app.DateFormat(row.APPDEPTAUDITDATE.replace(/-/g, "/"), 'yyyy-MM-dd');
            row.RECDEPTAUDITDATE = app.DateFormat(row.RECDEPTAUDITDATE.replace(/-/g, "/"), 'yyyy-MM-dd');
            row.PLANDONEDATE = app.DateFormat(row.PLANDONEDATE.replace(/-/g, "/"), 'yyyy-MM-dd');
            row.CONTRACTORPLANDONEDATE = app.DateFormat(row.CONTRACTORPLANDONEDATE.replace(/-/g, "/"), 'yyyy-MM-dd'); 
            row.VERIFYDATE = app.DateFormat(row.VERIFYDATE.replace(/-/g, "/"), 'yyyy-MM-dd'); 

            var html = '<tr><th colspan=" 9" style="text-align:center;height:40px;line-height:40px;font:14px;font-weight:700"> 委外维修流程单</th></tr>';
            html += '<tr><td style="font-size:14px;font-weight:600;min-width:120px">申请部门</td><td style="font-size:13px;font-weight:500">' + (row.ORGNAME == null ? "" : row.ORGNAME) + '</td><td style="font-size:14px;font-weight:600">申请人</td><td style="font-size:13px;font-weight:500">' + (row.PROPOSERNAME == null ? "" : row.PROPOSERNAME) + '</td><td style="font-size:14px;font-weight:600">申请时间</td><td style="font-size:13px;font-weight:500">' + (row.APPLICATIONDATE == null ? "" : row.APPLICATIONDATE) + '</td></tr>';//(row.APPLICATIONDATE == '0001-01-01T00:00:00+08:00' ? '' : app.DateFormat(row.APPLICATIONDATE, 'yyyy-MM-dd HH:mm:ss'))
            html += '<tr><td style="font-size:14px;font-weight:600">类型</td><td style="font-size:13px;font-weight:500">' + (row.OUTSOURCEREPAIRNAME == null ? "" : row.OUTSOURCEREPAIRNAME) + '</td><td style="font-size:14px;font-weight:600">对象名称</td><td style="font-size:13px;font-weight:500">' + (row.MTOBJECTNAME == null ? "" : row.MTOBJECTNAME) + '</td><td style="font-size:14px;font-weight:600">财务编码</td><td style="font-size:13px;font-weight:500">' + (row.MTOBJECTCODE != null ? row.MTOBJECTCODE : "") + '</td></tr>';
            html += '<tr><td style="font-size:14px;font-weight:600">单号</td><td style="font-size:13px;font-weight:500">' + (row.WORKORDERCODE == null ? "" : row.WORKORDERCODE) + '</td><td style="font-size:14px;font-weight:600">维修性质</td><td style="font-size:13px;font-weight:500">' + (row.MAINTENNATURE != null ? row.MAINTENNATURE : "") + '</td><td style="font-size:14px;font-weight:600">计划审核人</td><td  style="font-size:13px;font-weight:500">' + (row.OUTSOURCEREPAIRNAME == null ? "" : row.OUTSOURCEREPAIRNAME) + '</td></tr>';

            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;line-height:22px;">维修事由</td><td colspan="5"  style="font-size:13px;font-weight:500">' + (row.MAINTENREASON == null ? "" : row.MAINTENREASON) + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">维修内容</td><td colspan="5"  style="font-size:13px;font-weight:500">' + (row.OUTSOURCEDREQ == null ? "" : row.OUTSOURCEDREQ) + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">维修要求</td><td colspan="5"  style="font-size:13px;font-weight:500">' + (row.TECHNICALREQ == null ? "" : row.TECHNICALREQ) + '</td></tr>';

            html += '<tr><td style="font-size:14px;font-weight:600">审核人</td><td style="font-size:13px;font-weight:500">' + (row.APPDEPTAUDITORNAME == null ? "" : row.APPDEPTAUDITORNAME) + '</td><td style="font-size:14px;font-weight:600">审核日期</td><td style="font-size:13px;font-weight:500">' + (row.APPDEPTAUDITDATE == null ? "" : row.APPDEPTAUDITDATE) + '</td><td style="font-size:14px;font-weight:600">指定接收人</td><td style="font-size:13px;font-weight:500">' + (row.RECDEPTAUDITORNAME != null ? row.RECDEPTAUDITORNAME : "") + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">审核意见</td><td colspan="5" style="font-size:13px;font-weight:500">' + (row.APPDEPTAUDITOPINION == null ? "" : row.APPDEPTAUDITOPINION) + '</td></tr>';

            html += '<tr><td style="font-size:14px;font-weight:600">接收部门审核人</td><td style="font-size:13px;font-weight:500">' + (row.RECDEPTAUDITORNAME == null ? "" : row.RECDEPTAUDITORNAME) + '</td><td style="font-size:14px;font-weight:600">审核日期</td><td style="font-size:13px;font-weight:500">' + (row.RECDEPTAUDITDATE == null ? "" : row.RECDEPTAUDITDATE) + '</td><td style="font-size:14px;font-weight:600">指定经办人</td><td style="font-size:13px;font-weight:500">' + (row.ATTENTIOLINENAME != null ? row.ATTENTIOLINENAME : "") + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">接收部门审核意见</td><td colspan="5" style="font-size:13px;font-weight:500">' + row.APPDEPTAUDITOPINION + '</td></tr>';

            html += '<tr><td style="font-size:14px;font-weight:600">处置类型</td><td style="font-size:13px;font-weight:500">' + (row.OUTSOURCEDISPOSENAME == null ? "" : row.OUTSOURCEDISPOSENAME) + '</td><td style="font-size:14px;font-weight:600">维修预算</td><td style="font-size:13px;font-weight:500">' + (row.MAINTENANCEBUDGET != null ? row.MAINTENANCEBUDGET : "") + '</td><td style="font-size:14px;font-weight:600">施工计划日期</td><td style="font-size:13px;font-weight:500">' + (row.PLANDONEDATE == null ? "" : row.PLANDONEDATE) + '</td></tr>';
            html += '<tr><td style="font-size:14px;font-weight:600">委外协议</td><td style="font-size:13px;font-weight:500">' + (row.ISSIGNEDAGREEMENTNAME == null ? "" : row.ISSIGNEDAGREEMENTNAME) + '</td><td style="font-size:14px;font-weight:600">预算编码</td><td style="font-size:13px;font-weight:500">' + (row.BUDGETCODE != null ? row.BUDGETCODE : "") + '</td><td style="font-size:14px;font-weight:600">计划完成日期</td><td style="font-size:13px;font-weight:500">' + (row.CONTRACTORPLANDONEDATE == null ? "" : row.CONTRACTORPLANDONEDATE) + '</td></tr>';
            html += '<tr><td style="font-size:14px;font-weight:600">施工单位</td><td style="font-size:13px;font-weight:500">' + (row.CONTRACTORNAME == null ? "" : row.CONTRACTORNAME) + '</td><td style="font-size:14px;font-weight:600">M单号</td><td style="font-size:13px;font-weight:500">' + (row.PMORDERNO == null ? "" : row.PMORDERNO) + '</td><td style="font-size:14px;font-weight:600">指定验证人</td><td style="font-size:13px;font-weight:500">' + (row.VERIFIERNAME != null ? row.VERIFIERNAME : "") + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">维修情况说明</td><td colspan="5" style="font-size:13px;font-weight:500">' + row.CONTRACTORREQ + '</td></tr>';

            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">实施完工情况</td><td colspan="5" style="font-size:13px;font-weight:500">' + row.CONSTRUCTIONSITUATION + '</td></tr>';
            html += '<tr style="height:44px;"><td style="font-size:14px;font-weight:600;min-height:44px;line-height:22px;">效果验证说明</td><td colspan="5" style="font-size:13px;font-weight:500">' + row.EFFECTINSTRUCTION + '</td></tr>';
            html += '<tr><td style="font-size:14px;font-weight:600">验证日期</td><td style="font-size:13px;font-weight:500">' + row.VERIFYDATE + '</td><td style="font-size:14px;font-weight:600">验证人员</td><td style="font-size:13px;font-weight:500">' + (row.VERIFIERNAME == null ? "" : row.VERIFIERNAME) + '</td><td style="font-size:14px;font-weight:600">备注</td><td style="font-size:13px;font-weight:500">' + (row.REMARK != null ? row.REMARK : "") + '</td></tr>';

            $("#SpareProPrint").html(html);
            $("#ApplyerBox").html("领导签字 : ");
            $("#CompilerBox").html("日期 : ");
            $('#AddPrintingData').window({ "title": "新增" });
        } else {
            $.messager.alert("系统提示", "未找到相关委外维修信息，无法打印", "info");
        }
    }, function (result) { $.messager.alert("系统提示", result.Error, "info"); }, true, true);
}

//打印
function SavePrinting() {
    var obj = document.getElementById("AddPrintingData"); //print表示所要打印的区域  
    var tempWin = window.open("", "", "top=-10,left=-10,toolbar=no,menubar=no,location=no,status=no"); //重新打开一个窗口，
    window.top.moveTo(-10, -10);
    window.top.resizeTo(screen.availWidth, screen.availHeight);
    tempWin.document.open("text/html");
    tempWin.document.write(obj.innerHTML);
    tempWin.document.close();
    tempWin.print(); //调用打印机
    tempWin.close();//关闭窗口
    $('#AddPrintingData').window('close');
}

 

//HTML部分

<div id="AddPrintingDataBtn" class="edit-panel-button">
    <a class="easyui-linkbutton" href="javascript:void(0)" οnclick="SavePrinting()">打印</a>
    <a class="easyui-linkbutton" href="javascript:void(0)" οnclick="$('#AddPrintingData').window('close')">取消</a>
</div> 
<div id="AddPrintingData" class="easyui-dialog" style="width:1000px;height:600px;overflow:auto" data-options="modal:true,buttons:'#AddPrintingDataBtn'">
    <table id="SpareProPrint" style=" border-collapse: collapse;width:100%" border="1" bordercolor="#000"></table>
    <div style="height:30px;line-height:30px;width:100%">
        <span style="display: inline-block; width: 50%; height: 30px; line-height: 30px;padding-left:6px;font-size:12px;font-weight:600" id="ApplyerBox"></span>
        <span style="display: inline-block; width: 40%; height: 30px; line-height: 30px; padding-left: 6px; font-size: 12px; font-weight: 600; " id="CompilerBox"></span>
    </div>
</div>