【发布时间】：2021-10-08 03:33:20
【问题描述】：
我需要格式化大约 350 个 QR 码，以便将它们打印在模板中。我能够以正确的模式生成代码，但是我卡在将它们分组到页面上的步骤上。
如果可能的话，我将如何将每 30 个项目分组到一个页面中。
这是当前代码返回的内容（如您所见，每 30 个孩子被标记）：
这是我想要达到的目标的粗略说明：
（p.s. 我不得不大量切断 json 以适应字符。计数 :)）
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.spacer {
display: none;
}
.page {
width: 8.5in;
height: 11in;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.grid-container {
margin-top: 1.125in;
margin-bottom: 1.125in;
margin-right: 0.625in;
margin-left: 0.625in;
display: grid;
grid-template-columns: repeat(5, 1.25in);
grid-auto-rows: 1.25in;
grid-gap: 0.25in;
}
.label {
display: flex;
flex-direction: column;
align-items: center;
border: 1.9px solid black;
width: 1.25in;
height: 1.25in;
padding: 0px;
position: relative;
}
.label:nth-child(30n){
background-color: red;
}
.QR-Code {
z-index: -1;
position: absolute;
top: -15px;
width: 108%;
height: auto;
}
.text-body {
position: absolute;
bottom: 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labels</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<div class="grid-container" id="labelCont">
<script id="labelsTemplate" type="text-template">
{{#labels}}
<div class="label">
<img class="QR-Code" src="/{{File}}">
<div class="text-body">{{Name}}</div>
</div>
{{/labels}}
</script>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.js"></script>
<script src="html2pdf.bundle.min.js"></script>
<script>
$(document).ready(function () {
var data = {
"labels":[
{
"Name":"10000",
"File":"QRCodes/QRCodePart_10000.png"
},
{
"Name":"10001",
"File":"QRCodes/QRCodePart_10001.png"
},
{
"Name":"10002",
"File":"QRCodes/QRCodePart_10002.png"
},
{
"Name":"10003",
"File":"QRCodes/QRCodePart_10003.png"
},
{
"Name":"10004",
"File":"QRCodes/QRCodePart_10004.png"
},
{
"Name":"10005",
"File":"QRCodes/QRCodePart_10005.png"
},
{
"Name":"10006",
"File":"QRCodes/QRCodePart_10006.png"
},
{
"Name":"10007",
"File":"QRCodes/QRCodePart_10007.png"
},
{
"Name":"10008",
"File":"QRCodes/QRCodePart_10008.png"
},
{
"Name":"10009",
"File":"QRCodes/QRCodePart_10009.png"
},
{
"Name":"10010",
"File":"QRCodes/QRCodePart_10010.png"
},
{
"Name":"10011",
"File":"QRCodes/QRCodePart_10011.png"
},
{
"Name":"10012",
"File":"QRCodes/QRCodePart_10012.png"
},
{
"Name":"10013",
"File":"QRCodes/QRCodePart_10013.png"
},
{
"Name":"10014",
"File":"QRCodes/QRCodePart_10014.png"
},
{
"Name":"10015",
"File":"QRCodes/QRCodePart_10015.png"
},
{
"Name":"10016",
"File":"QRCodes/QRCodePart_10016.png"
},
{
"Name":"10017",
"File":"QRCodes/QRCodePart_10017.png"
},
{
"Name":"10018",
"File":"QRCodes/QRCodePart_10018.png"
},
{
"Name":"10019",
"File":"QRCodes/QRCodePart_10019.png"
},
{
"Name":"10020",
"File":"QRCodes/QRCodePart_10020.png"
},
{
"Name":"10021",
"File":"QRCodes/QRCodePart_10021.png"
},
{
"Name":"10022",
"File":"QRCodes/QRCodePart_10022.png"
},
{
"Name":"10023",
"File":"QRCodes/QRCodePart_10023.png"
},
{
"Name":"10024",
"File":"QRCodes/QRCodePart_10024.png"
},
{
"Name":"10025",
"File":"QRCodes/QRCodePart_10025.png"
},
{
"Name":"10026",
"File":"QRCodes/QRCodePart_10026.png"
},
{
"Name":"10027",
"File":"QRCodes/QRCodePart_10027.png"
},
{
"Name":"10028",
"File":"QRCodes/QRCodePart_10028.png"
},
{
"Name":"10029",
"File":"QRCodes/QRCodePart_10029.png"
},
{
"Name":"10030",
"File":"QRCodes/QRCodePart_10030.png"
},
{
"Name":"10031",
"File":"QRCodes/QRCodePart_10031.png"
},
{
"Name":"10032",
"File":"QRCodes/QRCodePart_10032.png"
},
{
"Name":"10033",
"File":"QRCodes/QRCodePart_10033.png"
},
{
"Name":"10034",
"File":"QRCodes/QRCodePart_10034.png"
},
{
"Name":"10035",
"File":"QRCodes/QRCodePart_10035.png"
},
{
"Name":"10036",
"File":"QRCodes/QRCodePart_10036.png"
},
{
"Name":"10037",
"File":"QRCodes/QRCodePart_10037.png"
},
{
"Name":"10038",
"File":"QRCodes/QRCodePart_10038.png"
},
{
"Name":"10039",
"File":"QRCodes/QRCodePart_10039.png"
},
{
"Name":"10040",
"File":"QRCodes/QRCodePart_10040.png"
},
{
"Name":"10041",
"File":"QRCodes/QRCodePart_10041.png"
},
{
"Name":"10042",
"File":"QRCodes/QRCodePart_10042.png"
},
{
"Name":"10043",
"File":"QRCodes/QRCodePart_10043.png"
},
{
"Name":"10044",
"File":"QRCodes/QRCodePart_10044.png"
},
{
"Name":"10045",
"File":"QRCodes/QRCodePart_10045.png"
},
{
"Name":"10046",
"File":"QRCodes/QRCodePart_10046.png"
},
{
"Name":"10047",
"File":"QRCodes/QRCodePart_10047.png"
},
{
"Name":"10048",
"File":"QRCodes/QRCodePart_10048.png"
},
{
"Name":"10049",
"File":"QRCodes/QRCodePart_10049.png"
},
{
"Name":"10050",
"File":"QRCodes/QRCodePart_10050.png"
},
{
"Name":"10051",
"File":"QRCodes/QRCodePart_10051.png"
},
{
"Name":"10052",
"File":"QRCodes/QRCodePart_10052.png"
},
{
"Name":"10053",
"File":"QRCodes/QRCodePart_10053.png"
},
{
"Name":"10054",
"File":"QRCodes/QRCodePart_10054.png"
},
{
"Name":"10055",
"File":"QRCodes/QRCodePart_10055.png"
},
{
"Name":"10056",
"File":"QRCodes/QRCodePart_10056.png"
},
{
"Name":"10057",
"File":"QRCodes/QRCodePart_10057.png"
},
{
"Name":"10058",
"File":"QRCodes/QRCodePart_10058.png"
},
{
"Name":"10059",
"File":"QRCodes/QRCodePart_10059.png"
},
{
"Name":"10060",
"File":"QRCodes/QRCodePart_10060.png"
},
{
"Name":"10061",
"File":"QRCodes/QRCodePart_10061.png"
}]
}
var template = $("#labelsTemplate").html();
$("#labelCont").html(Mustache.to_html(template, data));
});
</script>
</html>【问题讨论】：
标签： javascript html css mustache templating