97 lines
3.4 KiB
JavaScript
97 lines
3.4 KiB
JavaScript
|
import puppeteer from 'puppeteer';
|
||
|
|
import fs from 'fs';
|
||
|
|
|
||
|
|
const html = `
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
@page { size: 4in 6in; margin: 0; }
|
||
|
|
*, *::before, *::after { box-sizing: border-box; }
|
||
|
|
html, body { width: 4in; height: 6in; margin: 0; padding: 0.5in; overflow: hidden; }
|
||
|
|
body { font-family: Arial, sans-serif; color: #111827; font-size: 11px; }
|
||
|
|
.label { border: 2px solid #111827; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 12px; height: 100%; overflow: hidden; }
|
||
|
|
.row { display: flex; justify-content: space-between; gap: 12px; }
|
||
|
|
.muted { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #4b5563; }
|
||
|
|
.brand { border-bottom: 2px solid #ed8936; padding-bottom: 10px; }
|
||
|
|
.brand h1 { margin: 0; font-size: 18px; color: #ed8936; }
|
||
|
|
.block { border: 1px solid #d1d5db; border-radius: 10px; padding: 10px; }
|
||
|
|
.stack { display: flex; flex-direction: column; gap: 4px; }
|
||
|
|
.barcode { border: 2px solid #111827; border-radius: 10px; padding: 8px; text-align: center; font-family: monospace; font-size: 18px; letter-spacing: 0.18em; }
|
||
|
|
.strong { font-weight: 700; }
|
||
|
|
.big { font-size: 16px; font-weight: 700; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="label">
|
||
|
|
<div class="brand">
|
||
|
|
<div class="row">
|
||
|
|
<div>
|
||
|
|
<div class="muted">From</div>
|
||
|
|
<h1>Message Point Media</h1>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:right;">
|
||
|
|
<div class="muted">Shipment</div>
|
||
|
|
<div class="big">SHP-00003</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="block">
|
||
|
|
<div class="muted">Ship To</div>
|
||
|
|
<div class="stack" style="margin-top:8px;">
|
||
|
|
<div class="strong">Northwind Fabrication</div>
|
||
|
|
<div>42 Assembly Ave</div>
|
||
|
|
<div>Milwaukee, WI 53202</div>
|
||
|
|
<div>USA</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="block" style="flex:1;">
|
||
|
|
<div class="muted">Service</div>
|
||
|
|
<div class="big" style="margin-top:6px;">GROUND</div>
|
||
|
|
</div>
|
||
|
|
<div class="block" style="width:90px;">
|
||
|
|
<div class="muted">Pkgs</div>
|
||
|
|
<div class="big" style="margin-top:6px;">1</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="block" style="flex:1;">
|
||
|
|
<div class="muted">Sales Order</div>
|
||
|
|
<div class="strong" style="margin-top:6px;">SO-00002</div>
|
||
|
|
</div>
|
||
|
|
<div class="block" style="width:110px;">
|
||
|
|
<div class="muted">Ship Date</div>
|
||
|
|
<div class="strong" style="margin-top:6px;">N/A</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="block">
|
||
|
|
<div class="muted">Reference</div>
|
||
|
|
<div style="margin-top:6px;">FG-CTRL-BASE · Control Base Assembly</div>
|
||
|
|
</div>
|
||
|
|
<div class="barcode">
|
||
|
|
*SHP-00003*
|
||
|
|
</div>
|
||
|
|
<div style="text-align:center; font-size:10px; color:#4b5563;">Carrier pending · Tracking pending</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
`;
|
||
|
|
|
||
|
|
async function run() {
|
||
|
|
const browser = await puppeteer.launch();
|
||
|
|
try {
|
||
|
|
const page = await browser.newPage();
|
||
|
|
await page.setContent(html, { waitUntil: "networkidle0" });
|
||
|
|
const pdf = await page.pdf({
|
||
|
|
format: "A4",
|
||
|
|
printBackground: true,
|
||
|
|
preferCSSPageSize: true,
|
||
|
|
});
|
||
|
|
fs.writeFileSync('/tmp/test-label.pdf', pdf);
|
||
|
|
console.log("PDF generated at /tmp/test-label.pdf");
|
||
|
|
} finally {
|
||
|
|
await browser.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
run();
|