Fix 2-page label: reset @page margin to 0, shrink barcode to fit
Deploy to LXC / deploy (push) Successful in 19s
Deploy to LXC / deploy (push) Successful in 19s
The custom @page margins conflicted with browser minimum margins, causing overflow. Now @page margin is 0, barcode height 8mm→6mm, scale 3→2, text size 12→10 so content fits within 29mm even with browser minimum margins selected. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,10 +5,10 @@ export async function generateBarcodeSvg(text: string): Promise<string> {
|
|||||||
const buf = await bwipjs.toBuffer({
|
const buf = await bwipjs.toBuffer({
|
||||||
bcid: 'code128',
|
bcid: 'code128',
|
||||||
text,
|
text,
|
||||||
scale: 3,
|
scale: 2,
|
||||||
height: 8,
|
height: 8,
|
||||||
includetext: true,
|
includetext: true,
|
||||||
textsize: 12,
|
textsize: 10,
|
||||||
textxalign: 'center'
|
textxalign: 'center'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
||||||
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm.
|
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div style="margin-top: 0.5mm;">
|
<div style="margin-top: 0.5mm;">
|
||||||
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
|
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
<style>
|
<style>
|
||||||
@page {
|
@page {
|
||||||
size: 62mm 29mm;
|
size: 62mm 29mm;
|
||||||
margin: 0mm 0.5mm 0mm 2mm;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
.no-print { display: none !important; }
|
.no-print { display: none !important; }
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
||||||
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm.
|
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
|
<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div style="margin-top: 0.5mm;">
|
<div style="margin-top: 0.5mm;">
|
||||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
|
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
<style>
|
<style>
|
||||||
@page {
|
@page {
|
||||||
size: 62mm 29mm;
|
size: 62mm 29mm;
|
||||||
margin: 0mm 0.5mm 0mm 2mm;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
.no-print { display: none !important; }
|
.no-print { display: none !important; }
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
||||||
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm.
|
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div style="margin-top: 0.5mm;">
|
<div style="margin-top: 0.5mm;">
|
||||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
|
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
<style>
|
<style>
|
||||||
@page {
|
@page {
|
||||||
size: 62mm 29mm;
|
size: 62mm 29mm;
|
||||||
margin: 0mm 0.5mm 0mm 2mm;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
.no-print { display: none !important; }
|
.no-print { display: none !important; }
|
||||||
|
|||||||
Reference in New Issue
Block a user