Question

我有一个数据集，我需要在这些卡上打印数据（每张卡一行数据）： magnatag.com

格式化时我真的很难过。正在打印的打印机可以像这样从8.5 x 11纸张的边缘一直打印到.2。用户想要向左和向右打印，但行显然必须保持在卡片边界内。

使用的卡都是白色的，其中一个数据点是卡片打印的颜色。为了使示例比现实生活中的问题更容易/更清洁，请假设此标记：

  <body>
    <div class="cardSheet">
      <div class="card blue">Content</div>
      <div class="card red">Content</div>
      <div class="card green">Content</div>
      <div class="card green">Content</div>
      <div class="card red">Content</div>
      <div class="card blue">Content</div>
      <div class="card green">Content</div>
      <div class="card red">Content</div>
      <div class="card green">Content</div>
      <div class="card green">Content</div>
    </div>
  </body>

在第五行之后，下一行将在第二页上打印，等等。

单张卡内有很多格式，但我想我可以处理。每页打印5个可打印的盒子，打印到这些卡片上（使用.21和＃34;打印预览中的左右边距，每张卡片的顶部/底部）

如果不同的浏览器增加了复杂性，请假设Google Chrome v 53.x

提前感谢您的帮助！

Answer 1

您需要将其放在页面上以进行测试。我做了一些运行但我没有任何字母大小的寻呼机这里只有a4来测试。看起来它会起作用。我在打印选项中使用了chrome并将边距设置为无。

我只是快速运行以显示一个页面，但您可以在第5张卡片之后轻松添加分页符以转到下一页。如果您不知道该怎么做，那么我可以稍后帮忙。

希望这会有所帮助，如果您需要帮助，请理解某些内容发表评论。

printBlock("blue");
printBlock("red");
printBlock("green");
printBlock("green");
printBlock("red");

function printBlock(color) {

  var block = "<div class='card " + color + "'>CONTENT<div>";

  $(".page").append(block);
}

* {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.page {
  width: 215.9mm;
  min-height: 279.4mm;
  margin: 1cm auto;
  position: relative;
  padding-left: 6.35mm;
  padding-top: 19.05mm;
  outline: 1px solid cyan;
}
.card {
  position: relative;
  width: 203.2mm;
  height: 50.8mm;
  background-color: #FFF;
  float: left;
  outline: 1px dashed #000;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
}
.blue {
  background-color: #DBFFFF;
}
.red {
  background-color: #FFDBDB;
}
.green {
  background-color: #EDFFDB;
}
@page {
  size: 215.9mm 279.4mm;
  margin: 0;
}
@media print {
  .page {
    margin: 0;
    border: initial;
    width: 215.9mm;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    outline: none;
  }
  .card {
    outline: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="page"></div>

打印到穿孔卡上的CSS

1 个答案: