Native thermal printing via iframe — 80mm, RTL, no blank tail

Problem: window.print() on the main page used A4 height (blank paper after receipt), no RTL direction, and Tailwind styles leaked into print. Solution — iframe isolation: - lib/thermal-print.ts: builds a self-contained HTML document (@page { size: 80mm auto; margin: 0 }, html { direction: rtl }) and fires it through a hidden off-screen <iframe>. The iframe document contains only the receipt so height == content height. - pos-slip-modal.tsx: Print button calls printThermal(buildThermalDocument()) instead of window.print(). Preview panel is unchanged (screen only). - pos-receipt-print.css: updated @page + direction as fallback for any remaining window.print() callers. Works with USB driver (Atom A300) as default printer — OS print spooler receives the job exactly as if it were any other document. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 02:52:46 +03:30
parent 42d7667735
commit fc21471131
3 changed files with 340 additions and 45 deletions
@@ -0,0 +1,212 @@
+/**
+ * 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, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 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.
+    }
+  });
+}