简而言之:有没有办法打印从iOS和Android等找模板?或者是有至少一个方法来打印与适当的分页符WebKit的HTML表格?
龙:我的应用程序需要能够打印的内容的列表。我的第一次尝试是使用HTML创建一个模板,然后从代码中插入内容。该系统的工作原理,但是当表exeeds一个页面,WebKit的完全破坏表。我知道有对SO有关WebKit的分页符的一些问题,但解决方案的工作都不是。
此图像显示用铬印刷。正如你可以看到很好的分页符。
我的代码看起来像这样的时刻:
<!DOCTYPE html>
<html>
<head>
<style>
tr {
page-break-inside: avoid;
page-break-before: auto;
page-break-after: auto;
width: 100%;
}
html,
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
page-break-after: auto;
}
th,
td {
border: 0.5px solid black;
border-collapse: collapse;
page-break-after: auto;
}
th {
width: 30%;
}
th+th {
width: 40%;
text-align: center;
}
th+th+th {
width: 15%;
}
th+th+th+th {
width: 15%;
}
td+td {
text-align: center;
}
td+td+td {
text-align: right
}
h1 {
margin-bottom: 0.2cm;
}
hr {
background-color: #000000;
height: 1cm;
float: left;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.ean-upc.min.js"></script>
</head>
<body>
<div style="clear: both">
<h1 style="float: left">Materialentnahmeliste</h1>
<h1 style="float: right">1805/156</h1>
</div>
<table>
<thead>
<tr>
<th>Artikel</th>
<th>EAN</th>
<th>Menge</th>
<th>Verbr.</th>
</tr>
</thead>
<script>
const barcodes = [5413184160722, 4012615997145, 4004631016214, 5413184160593, 5413184160616, 5413184160654, 5413184160692, 4004631009315, 4004631047096, 4004631010977, 4210201175469, 5413184151492, 4004631062198, 4004631009476, 4004631011660, 4002515500361, 4012615996636, 4242002957005, 5413184104139, 5413184104047, 5413184170301, 4004631006567, 4002515824481, 4002515824528, 4002515942420, 5413184160968, 4004631000749, 4016803170921, 4016803174820, 4016803178187, 3121040039830, 5413184160081, 4002515932773, 4016803171263, 4016803037330, 4002515824177, 5413184122935, 4001797672001].map(String)
barcodes.forEach(barcode => {
document.write(`
<tr>
<td>${barcode}</td>
<td><svg id="b${barcode}"></svg></td>
<td>10000m</td>
<td>tet</td>
</tr>
`)
})
</script>
</table>
<p style="text-align:left;">
Ausgegeben von:
<span style="float:right;">Nov 25, 2018 at 3:00 PM</span>
</p>
<hr style="border: none">
<script>
barcodes.forEach(barcode => {
JsBarcode("#b" + barcode, barcode, {
format: "EAN13",
height: 25,
width: 2,
flat: true,
displayValue: true,
margin: 2
});
})
</script>
</body>
</html>