Question

我有一个可滚动的bootstrap模式，顶部有一个打印按钮。当用户点击它时，我正在打印模态。下面是代码， HTML：

<div class="container-fluid" id="body-noPrint">
    /* HTML BODY CONTENT */
</div>

<div id="print-content">
     <!--PRINT PREVIEW MODAL MARKUP-->
        <div class="modal fade" id="printViewModal" tabindex="-1" role="dialog">
              <div class="modal-dialog">
                    <div class="modal-content">
                          <div class="modal-header">                                
                                <button type="button" class="btn btn-primary pull-right" id="modal-Printbtn"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print</button>
                          </div><!--MODAL HEADER CLOSE-->
                          <div class="modal-body">
                              <!--DISPLAY THIS ROW AT MODAL VIEW-->
                                <div class="row">
                                        /* HEADER UI */                     
                                </div><!--MODAL VIEW HEADER CONTENT CLOSE-->

                              <!--DISPLAY THIS ROW AT PRINT-->
                                <div class="row" style="display:none;"> 
                                        /* HEADER PRINT */
                                </div><!--PRINT VIEW HEADER CONTENT CLOSE-->

                              <!--PRINT VIEW DYNAMIC TABLE-->
                                <div class="table-responsive" id="modalTable">
                                    <table id="modalTbl" class="table table-bordered">
                                      <thead>
                                        <tr class="active">
                                            <th class='col-xs-6'></th>
                                            <th class='col-xs-1'></th>
                                            <th class='col-xs-5'></th>
                                        </tr>
                                      </thead> 
                                      <tbody>               
                                      </tbody>           
                                    </table>                            
                                </div>                                                                                        
                        </div>                
                    </div>
              </div>
        </div>
</div>

JS：

$('#prntBtn').click(function(){
    window.print();
});

CSS：

@media print{
  /* Below CSS Makes Modal Content Visible At Print */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible;  /* make visible modal body and header */
    }

    body.modal-open .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        overflow: visible!important;
    }

/*Print Preview Modal Styling CSS*/    
    #printViewModal .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #printViewModal .modal-content {      
      height: 100%;
      border-radius: 0;
      overflow:auto;
    }

    #printViewModal *{
        font-size:x-small !important;
    }

    #modalTbl thead tr > th{
        text-align:center;
    }

    #modalTbl tbody tr > td{
        text-align:left;
    }

    #modalTable{
        margin-top:10px;
    } 
}

我从堆栈溢出中得到一个建议来替换'visibility：hidden'，因为我试过'display：none'，但是这会在打印时显示空白页。

有人可以帮我，在打印时删除这些额外的页面。

Answer 1

您可以启用此选项 [背景图形] 以查看页面上额外打印的内容。希望这有助于找出根本原因。

打印可滚动引导模式最后添加额外的页面

1 个答案: