时间戳

首页 > 解决方案 > 如何在同一张 A4 纸上打印两次网页？

html - 如何在同一张 A4 纸上打印两次网页？

问题描述

我想要在同一张 A4 纸上打印两份发票。反正有没有达到同样的效果？保证发票的单张打印（在我的例子中是 html 表格）不会超过 A4 纸的一半。

标签： htmlcsswebmedia-queries

解决方案

如果我正确理解了您的问题，您将在 A4 页面上打印 2 张发票的 .html 文件首先需要准备为 .html/.php 文件（网页）然后打印。
我还将假设，您已经创建了一个将数据提取到发票中的动态页面。

/** style.css  **/

.invoice {
  margin-top: 2em;
}

span {
  color: blue;
  border: 1px solid black;
}

.extra span {
  color: inherit;
}

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 20mm; /* Adjust margin as you like. */        
   } 
   
   * {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important} /* Black prints faster */
   
   pre, blockquote {border: 1px solid #999; page-break-inside: avoid; }


thead {display: table-header-group; } /* Repeat header row at top of each printed page */
  tr, img {page-break-inside: avoid; }
  
  img {max-width: 100% !important; }
  
  @page {margin: 0.5cm}
  
  p, h2, h3 {orphans: 3; widows: 3}
  
  h2, h3{page-break-after: avoid}
}
<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div class="invoice">
  Here is <span>First invoice table format</span>
</div>

<div class="invoice extra" style="color:green">
  Here is <span>Second invoice table format</span>.
</div>

</body>
</html>

推荐阅读