306 lines
8.1 KiB
HTML
306 lines
8.1 KiB
HTML
<script src="https://unpkg.com/art-template@4.13.4/lib/template-web.js"></script>
|
|
<script src=" https://printjs-4de6.kxcdn.com/print.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href=" https://printjs-4de6.kxcdn.com/print.min.css">
|
|
<style>
|
|
.page {
|
|
/* border: 1px solid #000; */
|
|
width: 194mm;
|
|
height: 279.4mm;
|
|
/* height: auto; */
|
|
/* display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: flex-start; */
|
|
/* align-items: center; */
|
|
/* padding-top: mm;
|
|
padding-left: 16mm; */
|
|
/* padding-top: calc((297mm - (25.4mm * 11)) / 2);
|
|
padding-left: calc((210mm - (48.5mm * 4)) / 2); */
|
|
/* padding-left: 8mm;
|
|
padding-right: 8mm;
|
|
padding-top: 8.8mm;
|
|
padding-bottom: 8.8mm; */
|
|
/* padding: calc(8.8mm - 2.96mm) calc(8mm - 2.96mm); */
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 48.5mm);
|
|
grid-template-rows: repeat(11, 25.4mm);
|
|
/* grid-template-columns: repeat(4, calc(210mm / 4));
|
|
grid-template-rows: repeat(11, calc(297mm / 11)); */
|
|
gap: 0;
|
|
/* justify-content: center; */
|
|
/* justify-content: center;
|
|
align-items: center; */
|
|
/* margin: 0 auto; */
|
|
/* padding-left: 8mm; */
|
|
/* padding-bottom: 8.8mm; */
|
|
}
|
|
|
|
.print-area {
|
|
border: 0.1mm dashed #87CEFA;
|
|
/* Comment to disable the box around the label */
|
|
/* height: calc(100% - 0.2mm); */
|
|
|
|
/* Single label height on the A4 paper */
|
|
/* width: 52.3mm; */
|
|
/* width: calc(100% - 0.2mm); */
|
|
display: flex;
|
|
/* padding: 0.2mm; */
|
|
justify-content: center;
|
|
align-content: flex-start;
|
|
/* align-items: center; */
|
|
/* width: 65mm; */
|
|
/* Single label width on the A4 paper */
|
|
/* float: left; */
|
|
/* margin-right: 0.5mm; */
|
|
/* margin-left: 0.25mm;
|
|
margin-bottom: 0.25mm;
|
|
margin-top: 0.25mm; */
|
|
/* margin-bottom: 2mm; */
|
|
margin: 0.25mm;
|
|
/* padding: 0.25mm; */
|
|
}
|
|
|
|
.print-area:nth-child(41),.print-area:nth-child(42),.print-area:nth-child(43)
|
|
,.print-area:nth-child(44) {
|
|
padding-bottom: 4mm;
|
|
}
|
|
|
|
.print-area:nth-child(41) .qrcode,.print-area:nth-child(42) .qrcode,
|
|
.print-area:nth-child(43) .qrcode,.print-area:nth-child(44) .qrcode
|
|
{
|
|
height: calc(100% - 5mm);
|
|
}
|
|
|
|
.print-area:nth-child(42) .right-content {
|
|
/* font-size: 3mm; */
|
|
}
|
|
/* .print-area:nth-child(4n) {
|
|
margin-right: 0.25mm;
|
|
}
|
|
|
|
.print-area:nth-child(1) {
|
|
margin-top: 0.25mm;
|
|
}
|
|
|
|
.print-area:nth-child(2) {
|
|
margin-top: 0.25mm;
|
|
}
|
|
|
|
.print-area:nth-child(3) {
|
|
margin-top: 0.25mm;
|
|
}
|
|
|
|
.print-area:nth-child(4) {
|
|
margin-top: 0.25mm;
|
|
} */
|
|
|
|
.item {
|
|
/* border: 1px solid red; */
|
|
/* margin: 0.2mm;
|
|
display: inline-flex;
|
|
/* align-items: center; */
|
|
/* height: calc(100% - 0.2cm);
|
|
width: calc(100% - 0.2cm); */
|
|
/* border: 0.1mm dashed #87CEFA; */
|
|
/* width: 100%; */
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
/* margin-top: 4mm;
|
|
margin-left: 4mm;
|
|
margin-right: 4mm;
|
|
margin-bottom: 4mm; */
|
|
/* text-align: center; */
|
|
}
|
|
|
|
/*Styling below is used just for positioning the items inside the label. */
|
|
|
|
.left-content {
|
|
/* position: absolute; */
|
|
/* top: 17mm;
|
|
left: 5mm; */
|
|
/* right: 0; */
|
|
width: 24mm;
|
|
/* height: 8mm; */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: inherit;
|
|
font-size: 3mm;
|
|
line-height: 3mm;
|
|
color: #87CEFA;
|
|
}
|
|
|
|
.right-content {
|
|
display: grid;
|
|
/* align-items: first baseline; */
|
|
font-size: 4mm;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
.qrcode {
|
|
height: calc(100% - 6mm);
|
|
margin: 0;
|
|
}
|
|
|
|
.divheading {
|
|
position: absolute;
|
|
top: 10mm;
|
|
left: 3mm;
|
|
right: 0;
|
|
width: 45mm;
|
|
height: 6mm;
|
|
padding: 0mm;
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
.divheading .pheading {
|
|
margin: 0mm;
|
|
vertical-align: middle;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.divsample {
|
|
position: absolute;
|
|
top: 4mm;
|
|
right: 5mm;
|
|
width: 20mm;
|
|
height: 6mm;
|
|
padding: 0mm;
|
|
}
|
|
|
|
.divsample .psample {
|
|
margin: 0mm;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
font-size: 8pt;
|
|
|
|
}
|
|
|
|
.divid {
|
|
position: absolute;
|
|
top: 25mm;
|
|
left: 5mm;
|
|
width: 41mm;
|
|
height: 6mm;
|
|
padding: 0mm;
|
|
}
|
|
|
|
.divid .pid {
|
|
margin: 0mm;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 8pt;
|
|
|
|
}
|
|
</style>
|
|
<script id="tpl-user" type="text/html">
|
|
{{each data}}
|
|
<div class="print-area">
|
|
<div class="item">
|
|
<div class='left-content'>
|
|
<img class='qrcode' src='./assets/qrcode.png'>
|
|
<div>长沙加零</div>
|
|
<div>17373135368</div>
|
|
<!-- <img class='qrcode' src='./assets/qrcode.png'> -->
|
|
</div>
|
|
<div class="right-content">
|
|
<div>i5 10400F</div>
|
|
<div>16/32G</div>
|
|
<div>256G 1TB</div>
|
|
<div>1060(3,5,6G)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</script>
|
|
<script id="tpl-all-in-one" type="text/html">
|
|
{{each data}}
|
|
<div class="print-area">
|
|
<div class="item">
|
|
<div class='left-content'>
|
|
<img class='qrcode' src='./assets/qrcode.png'>
|
|
<div>长沙加零</div>
|
|
<div>17373135368</div>
|
|
</div>
|
|
<div class="right-content">
|
|
<div>24寸一体机</div>
|
|
<div>i5 3代</div>
|
|
<div>8G</div>
|
|
<div>256G</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</script>
|
|
|
|
<div id="page" class="page">
|
|
|
|
</div>
|
|
<button type="button" onclick="exportPDF()">
|
|
Print Form
|
|
</button>
|
|
<script>
|
|
// var html = template('tpl-user', { data: Array.from({ length: 44 }) });
|
|
var html = template('tpl-all-in-one', { data: Array.from({ length: 44 }) });
|
|
document.getElementById("page").innerHTML = html;
|
|
|
|
const exportPDF = () => {
|
|
// 使用html2canvas捕获div内容
|
|
html2canvas(document.getElementById("page"), {
|
|
scale: 2, // 提高分辨率
|
|
useCORS: true,
|
|
allowTaint: true,
|
|
logging: false,
|
|
|
|
}).then(canvas => {
|
|
// 创建PDF
|
|
const imgData = canvas.toDataURL('image/png', 1);
|
|
|
|
const link = document.createElement('a');
|
|
link.download = `canvas-export.png`;
|
|
link.href = imgData;
|
|
link.click();
|
|
return;
|
|
|
|
|
|
|
|
const pdf = new jspdf.jsPDF({
|
|
orientation: 'portrait',
|
|
unit: 'mm',
|
|
// format: 'a4'
|
|
format: [279.4, 194]
|
|
});
|
|
|
|
// const imgWidth = pdf.internal.pageSize.getWidth();
|
|
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
|
|
|
// 添加图片到PDF
|
|
// pdf.addImage(imgData, 'JPEG', 0, 0, 194, 279.4);
|
|
pdf.addImage(imgData, 'JPEG', 0, 0, 194, 279.4);
|
|
// console.log(imgWidth, imgHeight);
|
|
// 保存PDF
|
|
pdf.save(`1.pdf`);
|
|
|
|
// 恢复按钮状态
|
|
// this.textContent = btnText;
|
|
// this.disabled = false;
|
|
}).catch(error => {
|
|
console.error('导出PDF失败:', error);
|
|
alert('导出PDF时出错，请重试。');
|
|
|
|
// 恢复按钮状态
|
|
// this.textContent = btnText;
|
|
// this.disabled = false;
|
|
});
|
|
}
|
|
</script> |