Question

我正在尝试打印包含div的HTML页面，其中包含大量内容。页面的HTML如下：

<div class="outer">
   <div class="inner">
       <ol>
          <li>Content goes here</li>
          <li>Content goes here</li>
          .....
          .....
       </ol>
       <ol>
          <li>Content goes here</li>
          <li>Content goes here</li>
          .....
          .....
       </ol>
       ...............
       ...............
   </div>
</div>

印刷媒体css如下：

@media print{
     .outer{
             display:inline;
             overflow:visible;
      }
}

但是当我打开此页面的打印预览时，div内容丢失了。打印预览显示从div开始，然后空白（约两页）和div的某些结束内容的一些内容。

Answer 1

如果你采用以下方式，它应该是有效的：

<!DOCTYPE html>
<html>
<head>
<style>
@media screen {
    p {
        font-family: verdana, sans-serif;
        font-size: 17px;
    }
}

@media print {
    .inner {
        font-family: georgia, serif;
        font-size: 20px;
        color: red;
    }
}
</style>
</head>
<body>

<h2>The @media Rule</h2>

<div class="inner"><b>Test it!</b> Print this page (or open Print Preview), and you will see that the text will be displayed in blue, and in another smaller font.</div>

</body>
</html>

我带w3school.com @ media-print示例并根据您的要求更改它显示字体更改并在尝试打印时应用css。

感谢。

Answer 2

这是我的代码，对我来说很好。

我想用css @media打印“Invoice”类。
“禁止打印”课程将被禁用。

<强> HTML

<div class="pad margin no-print" style="overflow:hidden;margin-top:20px">
   <div id="divControl" class="col-lg-6 col-md-6" style="margin-top:10px"></div>
</div> 
<div class="content invoice">
    <div class="col-sm-4 invoice-col">
           <address>Dirección:</address>
    </div>
<div>

<强> CSS

在CSS的顶部：

/* Don't display when printing */    
@media print {
.no-print {
    display: none;
}
.left-side,
.header,
.content-header {
    display: none;
}
.right-side {
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
@page { /* with this margin, no extra blank page to me */
    margin: 0mm auto;    /* this affects the margin in the printer settings */
}
}

在CSS的底部：

/* Enhancement for printing */
@media print {
.invoice {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}
.invoice-col {
    float: left;
    width: 33.3333333%;
}
.table-responsive {
    overflow: auto;
}
.table-responsive > .table tr th,
.table-responsive > .table tr td {
    white-space: normal!important;
}
}

使用print media css打印div内容

2 个答案: