我有一个数据集，我需要将数据打印到这些卡片上(每张卡片一行数据): 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 个可打印框，这些框将打印到这些卡片上(打印预览中的左右边距为 0.21"，每张卡片的顶部/底部)
如果不同的浏览器增加了复杂性，假设 Google Chrome v 53.x
在此先感谢您的帮助!
最佳答案
您需要将它单独放在一个页面上进行测试。我跑了几次，但我这里没有任何字母大小的传呼机，只有 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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40274073/