213 lines
8.5 KiB
TypeScript
213 lines
8.5 KiB
TypeScript
|
/**
|
|||
|
|
* thermal-print.ts
|
|||
|
|
*
|
|||
|
|
* Generates a self-contained 80 mm HTML document and fires it through a
|
|||
|
|
* hidden <iframe> so the browser's OS print spooler routes the job to the
|
|||
|
|
* default printer (e.g. Atom A300 USB driver).
|
|||
|
|
*
|
|||
|
|
* Why iframe instead of window.print() on the main page?
|
|||
|
|
* – The iframe document contains ONLY the receipt, so @page height = content
|
|||
|
|
* height. No blank A4 tail after the receipt.
|
|||
|
|
* – `html { direction: rtl }` is set unconditionally inside the iframe.
|
|||
|
|
* The main app's dir attribute never bleeds in.
|
|||
|
|
* – No `visibility: hidden` tricks needed — the print area IS the document.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export type ThermalLine = {
|
|||
|
|
name: string;
|
|||
|
|
quantity: number;
|
|||
|
|
price?: string;
|
|||
|
|
notes?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export type ThermalTotals = {
|
|||
|
|
subtotal?: string;
|
|||
|
|
discount?: string;
|
|||
|
|
tax?: string;
|
|||
|
|
total: string;
|
|||
|
|
payments?: { method: string; amount: string }[];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export type ThermalSlipData = {
|
|||
|
|
cafeName: string;
|
|||
|
|
/** "فیش آشپزخانه" or "صورتحساب مشتری" */
|
|||
|
|
title: string;
|
|||
|
|
date: string;
|
|||
|
|
/** Pre-formatted row, e.g. "میز: ۳ | سفارش: #۱۰۵" */
|
|||
|
|
metaRow?: string;
|
|||
|
|
lines: ThermalLine[];
|
|||
|
|
totals?: ThermalTotals;
|
|||
|
|
footer?: string;
|
|||
|
|
/** 'fa' (default) → RTL, 'en' → LTR */
|
|||
|
|
locale?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
// Helpers
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
/** Escapes a string for safe injection into an HTML template. */
|
|||
|
|
function esc(str: string): string {
|
|||
|
|
return str
|
|||
|
|
.replace(/&/g, "&")
|
|||
|
|
.replace(/</g, "<")
|
|||
|
|
.replace(/>/g, ">")
|
|||
|
|
.replace(/"/g, """);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
// Document builder
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
export function buildThermalDocument(data: ThermalSlipData): string {
|
|||
|
|
const isRtl = (data.locale ?? "fa") !== "en";
|
|||
|
|
const dir = isRtl ? "rtl" : "ltr";
|
|||
|
|
const lang = data.locale ?? "fa";
|
|||
|
|
|
|||
|
|
const linesHtml = data.lines
|
|||
|
|
.map((l) => {
|
|||
|
|
const notePart = l.notes ? ` (${esc(l.notes)})` : "";
|
|||
|
|
return `<div class="row">
|
|||
|
|
<span>${esc(l.name)} × ${l.quantity}${notePart}</span>
|
|||
|
|
${l.price ? `<span class="price">${esc(l.price)}</span>` : ""}
|
|||
|
|
</div>`;
|
|||
|
|
})
|
|||
|
|
.join("\n");
|
|||
|
|
|
|||
|
|
let totalsHtml = "";
|
|||
|
|
if (data.totals) {
|
|||
|
|
const tt = data.totals;
|
|||
|
|
const subtotalLabel = isRtl ? "جمع اقلام" : "Subtotal";
|
|||
|
|
const discountLabel = isRtl ? "تخفیف" : "Discount";
|
|||
|
|
const taxLabel = isRtl ? "مالیات (۹٪)" : "Tax (9%)";
|
|||
|
|
const totalLabel = isRtl ? "مجموع" : "Total";
|
|||
|
|
totalsHtml = `
|
|||
|
|
<hr class="dashed">
|
|||
|
|
${tt.subtotal ? `<div class="row sm"><span>${subtotalLabel}</span><span>${esc(tt.subtotal)}</span></div>` : ""}
|
|||
|
|
${tt.discount ? `<div class="row sm"><span>${discountLabel}</span><span>- ${esc(tt.discount)}</span></div>` : ""}
|
|||
|
|
${tt.tax ? `<div class="row sm"><span>${taxLabel}</span><span>${esc(tt.tax)}</span></div>` : ""}
|
|||
|
|
<div class="row total"><span>${totalLabel}</span><span>${esc(tt.total)}</span></div>
|
|||
|
|
${(tt.payments ?? [])
|
|||
|
|
.map((p) => `<div class="row sm mt1"><span>${esc(p.method)}</span><span>${esc(p.amount)}</span></div>`)
|
|||
|
|
.join("")}
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const footerHtml = data.footer
|
|||
|
|
? `<hr class="dashed"><div class="center sm muted">${esc(data.footer)}</div>`
|
|||
|
|
: "";
|
|||
|
|
|
|||
|
|
return `<!DOCTYPE html>
|
|||
|
|
<html dir="${dir}" lang="${lang}">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<style>
|
|||
|
|
/* ── Page ─────────────────────────────────────────────────── */
|
|||
|
|
@page {
|
|||
|
|
/* 80 mm wide; height tracks the content — no blank tail */
|
|||
|
|
size: 80mm auto;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
/* ── Reset ────────────────────────────────────────────────── */
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
/* ── Root ─────────────────────────────────────────────────── */
|
|||
|
|
html, body {
|
|||
|
|
width: 80mm;
|
|||
|
|
direction: ${dir};
|
|||
|
|
font-family: 'Tahoma', 'Vazirmatn', 'B Nazanin', 'Arial', sans-serif;
|
|||
|
|
font-size: 12pt;
|
|||
|
|
color: #000;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
/* ── Wrapper ──────────────────────────────────────────────── */
|
|||
|
|
.wrap { padding: 3mm 4mm 5mm; }
|
|||
|
|
/* ── Text helpers ─────────────────────────────────────────── */
|
|||
|
|
.center { text-align: center; }
|
|||
|
|
.bold { font-weight: 700; }
|
|||
|
|
.sm { font-size: 10pt; }
|
|||
|
|
.muted { color: #555; }
|
|||
|
|
.mt1 { margin-top: 1mm; }
|
|||
|
|
.mt2 { margin-top: 2mm; }
|
|||
|
|
/* ── Divider ──────────────────────────────────────────────── */
|
|||
|
|
hr.dashed { border: none; border-top: 1px dashed #000; margin: 2.5mm 0; }
|
|||
|
|
hr.solid { border: none; border-top: 1px solid #000; margin: 2.5mm 0; }
|
|||
|
|
/* ── Rows ─────────────────────────────────────────────────── */
|
|||
|
|
.row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: baseline;
|
|||
|
|
gap: 2mm;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
.row .price { white-space: nowrap; }
|
|||
|
|
/* ── Totals ───────────────────────────────────────────────── */
|
|||
|
|
.total {
|
|||
|
|
font-size: 14pt;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-top: 1mm;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="wrap">
|
|||
|
|
<div class="center bold">${esc(data.cafeName)}</div>
|
|||
|
|
<div class="center bold sm mt1">${esc(data.title)}</div>
|
|||
|
|
<div class="center sm muted mt1">${esc(data.date)}</div>
|
|||
|
|
${data.metaRow ? `<div class="sm mt2">${esc(data.metaRow)}</div>` : ""}
|
|||
|
|
<hr class="dashed">
|
|||
|
|
${linesHtml}
|
|||
|
|
${totalsHtml}
|
|||
|
|
${footerHtml}
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
// Print trigger
|
|||
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const IFRAME_ID = "meezi-thermal-print-frame";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Injects (or reuses) a hidden <iframe>, writes the thermal HTML document
|
|||
|
|
* into it, then calls `iframe.contentWindow.print()`.
|
|||
|
|
*
|
|||
|
|
* The iframe is positioned off-screen so it is invisible but still mounted
|
|||
|
|
* in the DOM — required for Chrome/Edge to render it before printing.
|
|||
|
|
*/
|
|||
|
|
export function printThermal(html: string): void {
|
|||
|
|
if (typeof window === "undefined") return;
|
|||
|
|
|
|||
|
|
let frame = document.getElementById(IFRAME_ID) as HTMLIFrameElement | null;
|
|||
|
|
|
|||
|
|
if (!frame) {
|
|||
|
|
frame = document.createElement("iframe");
|
|||
|
|
frame.id = IFRAME_ID;
|
|||
|
|
frame.setAttribute("aria-hidden", "true");
|
|||
|
|
frame.setAttribute("tabindex", "-1");
|
|||
|
|
frame.style.cssText =
|
|||
|
|
"position:fixed;top:-9999px;left:-9999px;width:80mm;height:1px;" +
|
|||
|
|
"border:0;opacity:0;pointer-events:none;";
|
|||
|
|
document.body.appendChild(frame);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const doc = frame.contentDocument ?? frame.contentWindow?.document;
|
|||
|
|
if (!doc) return;
|
|||
|
|
|
|||
|
|
doc.open();
|
|||
|
|
doc.write(html);
|
|||
|
|
doc.close();
|
|||
|
|
|
|||
|
|
// rAF gives the iframe one layout pass before we trigger the print dialog
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
try {
|
|||
|
|
frame!.contentWindow?.focus();
|
|||
|
|
frame!.contentWindow?.print();
|
|||
|
|
} catch {
|
|||
|
|
// Safari throws if the frame was cross-origin — shouldn't happen for
|
|||
|
|
// same-origin same-page iframes, but guard just in case.
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|