如何用css打印div?

时间:2018-06-01 07:22:17

标签: jquery html css

我正在尝试打印相同的页面输出。 这是示例输出: enter image description here

这是打印时的输出:

enter image description here

我认为我的剧本很好。请检查:



<script>
     function printDiv() 
     {

     var divToPrint=document.getElementById('print-print');
     var newWin=window.open('','Print-Window');

     newWin.document.open();
     newWin.document.write('<html>');
     newWin.document.write('<html>');
     newWin.document.write( "<link rel=\"stylesheet\" href=\"assets/vendor/bootstrap/css/bootstrap.min.css\" type=\"text/css\" media=\"print\"/>" );
      newWin.document.write( "<link rel=\"stylesheet\" href=\"assets/css/custom.css\" type=\"text/css\" media=\"print\"/>" );
      newWin.document.write('<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
      newWin.document.close();

      setTimeout(function(){newWin.close();},10);

      }
 </script>
&#13;
&#13;
&#13;

这就是它的CSS:我不知道发生了什么:(

&#13;
&#13;
@font-face {
    font-family: Arvo;
    src: url('../../../assets/fonts/Arvo-Regular.ttf');
}

.center{
    text-align: center;
}

td.td-client{
    white-space: nowrap;
}

.modal-content{
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.modal-notification{
    text-align: center;
    top: 10em;
}

.modal-payment{
    top: 5em;
}

.added-check{
    color: #9FD36A;
}

.checking-client{
    color: #4EC1E9;
}

.invalid-client{
    color: #EC5363;
}

.left{
    text-align: left;
}

.stong{
    font-weight: bolder;
}

.magus-text{
    margin-top: -0.90em;
    margin-left: -0.8em;
}

.magus-logo{
    margin-top: 0.05em;
    margin-right: -1em;
}

.arvo-font{
    font-family: Arvo;
}

.magus-border-back{
    margin-left: -2.75em;
    width: 111.9%;
    background-color: #4EC1E9;
}

.ptop{
    margin-top: 0.7em;
}

.cash-res{
    color: #00A0F0;
}

.text-left{
    text-align: left;
    margin-left: 12.8em;
}

.receipt-top{
    margin-top: -0.8em;
}
&#13;
&#13;
&#13;

0 个答案:

没有答案