Question

我有一个页面，它包含一个＆＃39;可打印视图＆＃39;按钮，点击此按钮后，所有内容将自动填充到“Bootstrap”按钮中。模态的。

此模式包含＆＃39;打印＆＃39;按钮，点击此按钮后，将打印模态而不是页面。

以下是CSS，

@media 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;
    }
}

JS，

$('#modal-Printbtn').click(function(){
        window.print();
});

由于它是长滚动模式，我添加了溢出：可见＆＃39;。现在的问题是，

1。边距和页眉，页脚：

a）在Chrome中，

我试过

@media Print{ 
    @page {margin:0; }
}

这也删除了页眉和页脚以及页边距。这很好。

b）在IE中，

上面的CSS根本没有得到反映，边距与页眉和页脚一起存在。

2。额外页面：

在IE和＆amp;铬，

即使内容适合6页打印，最后也会添加2个额外页面。我尝试了各种分页属性，但都没有。

此时，我不想尝试使用插件。

两者都是用户的关键问题。有人可以帮助我，这很令人沮丧。

谢谢，

Answer 1

最后，我能够解决'问题-1：页边距'，

我将我的CSS代码分开，@ media screen {}＆amp; @media print {}。我在@media Screen {}中添加了CSS但在@media print {}中错过了，稍后在两个部分中添加了这个后解决了我的问题 - 1.

@media screen{  
     @page{
        margin:0;
    }

    #stp-printViewVisitModal .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #stp-printViewVisitModal .modal-content {     
      height: 100%;
      border-radius: 0;
      overflow:auto;
    }   
    #stp-printViewVisitModal *{
        font-size:x-small !important;
    }
}

我无法弄清楚，为什么IE指出这个问题但不是铬。

无法在IE中打印页面边距，页眉和页脚

1 个答案: