npm - @hidemikimura/receipt-html-to-pdf - Versions diffs - 0.1.0 - Mend

@hidemikimura/receipt-html-to-pdf 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/CHANGELOG.md +44 -0
package/LICENSE +21 -0
package/README.md +109 -0
package/dist/receipt-html-to-pdf.min.js +39 -0
package/dist/receipt-html-to-pdf.min.js.map +7 -0
package/examples/lit.js +52 -0
package/examples/react.jsx +56 -0
package/examples/vanilla.html +55 -0
package/package.json +82 -0
package/src/font/cid.js +187 -0
package/src/font/parse.js +336 -0
package/src/font/registry.js +168 -0
package/src/font/subset.js +211 -0
package/src/index.js +239 -0
package/src/page.js +429 -0
package/src/paginate.js +119 -0
package/src/pdf/compress.js +30 -0
package/src/pdf/content.js +192 -0
package/src/pdf/image.js +33 -0
package/src/pdf/writer.js +253 -0
package/src/renderer.js +328 -0
package/src/units.js +127 -0
package/src/walker/image.js +264 -0
package/src/walker/text.js +199 -0
package/src/walker/walk.js +670 -0
package/types/font/cid.d.ts +40 -0
package/types/font/parse.d.ts +113 -0
package/types/font/registry.d.ts +63 -0
package/types/font/subset.d.ts +26 -0
package/types/index.d.ts +198 -0
package/types/page.d.ts +64 -0
package/types/paginate.d.ts +59 -0
package/types/pdf/compress.d.ts +13 -0
package/types/pdf/content.d.ts +65 -0
package/types/pdf/image.d.ts +9 -0
package/types/pdf/writer.d.ts +125 -0
package/types/renderer.d.ts +55 -0
package/types/units.d.ts +53 -0
package/types/walker/image.d.ts +72 -0
package/types/walker/text.d.ts +38 -0
package/types/walker/walk.d.ts +150 -0

package/src/renderer.js ADDED Viewed

@@ -0,0 +1,328 @@
+// @ts-check
+/**
+ * 非表示 iframe に HTML を描画し、レイアウト計測可能な Document を用意する。
+ */
+/**
+ * @typedef {object} RenderedDocument
+ * @property {HTMLIFrameElement} iframe
+ * @property {Document} doc
+ * @property {Window} win
+ * @property {HTMLElement} root   走査の起点（body）
+ * @property {() => void} destroy
+ */
+/**
+ * @param {import('./index.js').ConvertInput} input
+ * @param {{widthPx: number, stylesheets: 'inherit'|'none'|string[], mediaPrint: boolean, baseUrl?: string, warn?: (w: import('./index.js').ConversionWarning) => void}} opts
+ * @returns {Promise<RenderedDocument>}
+ */
+export async function renderDocument(input, opts) {
+  const iframe = document.createElement('iframe');
+  iframe.setAttribute('aria-hidden', 'true');
+  iframe.style.cssText = `position:fixed;left:-100000px;top:0;width:${opts.widthPx}px;height:1000px;border:0;visibility:hidden;pointer-events:none;`;
+  document.body.appendChild(iframe);
+  const win = iframe.contentWindow;
+  const doc = iframe.contentDocument;
+  if (!win || !doc) throw new Error('Failed to create rendering iframe');
+  const html = buildHtml(input, opts);
+  doc.open();
+  doc.write(html);
+  doc.close();
+  // 高さを内容に合わせる（スクロールが発生しないようにする）
+  const fit = () => {
+    iframe.style.height = `${Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight, 100)}px`;
+  };
+  fit();
+  await waitForStylesheets(doc);
+  fit();
+  await waitForFonts(doc);
+  await waitForImages(doc);
+  materializePseudoElements(doc, opts.warn ?? (() => {}));
+  fit();
+  // レイアウトを確定させる
+  void doc.body.offsetHeight;
+  return {
+    iframe,
+    doc,
+    win,
+    root: doc.body,
+    destroy: () => iframe.remove(),
+  };
+}
+/**
+ * @param {import('./index.js').ConvertInput} input
+ * @param {{stylesheets: 'inherit'|'none'|string[], mediaPrint: boolean, baseUrl?: string}} opts
+ * @returns {string}
+ */
+function buildHtml(input, opts) {
+  const baseUrl = opts.baseUrl ?? document.baseURI;
+  const base = `<base href="${escapeAttr(baseUrl)}">`;
+  const reset = `<style data-rhtp-reset>html,body{margin:0;padding:0;background:transparent}html{-webkit-text-size-adjust:100%}</style>`;
+  if (typeof input === 'string') {
+    // 完全な HTML 文書ならそのまま。<head> の直後に base とリセットを差し込む。
+    if (/<html[\s>]/i.test(input)) {
+      let html = input;
+      html = /<head[^>]*>/i.test(html)
+        ? html.replace(/<head[^>]*>/i, (m) => `${m}${base}${reset}`)
+        : html.replace(/<html[^>]*>/i, (m) => `${m}<head>${base}${reset}</head>`);
+      return opts.mediaPrint ? expandPrintMedia(html) : html;
+    }
+    const styles = collectStyles(opts.stylesheets, opts.mediaPrint);
+    return `<!DOCTYPE html><html><head><meta charset="utf-8">${base}${reset}${styles}</head><body>${input}</body></html>`;
+  }
+  // 要素: outerHTML と親文書のスタイルを持ち込む。
+  // <html> / <body> の属性（class, lang, data-* …）も写し、`body.reissue .x` のような祖先依存のセレクタを効かせる。
+  const styles = collectStyles(opts.stylesheets, opts.mediaPrint);
+  const htmlAttrs = copyAttrs(document.documentElement);
+  const bodyAttrs = copyAttrs(document.body);
+  const body = input === document.body || input === document.documentElement ? document.body.innerHTML : input.outerHTML;
+  return `<!DOCTYPE html><html${htmlAttrs}><head><meta charset="utf-8">${base}${reset}${styles}</head><body${bodyAttrs}>${body}</body></html>`;
+}
+/**
+ * @param {'inherit'|'none'|string[]} stylesheets
+ * @param {boolean} mediaPrint
+ * @returns {string}
+ */
+function collectStyles(stylesheets, mediaPrint) {
+  if (stylesheets === 'none') return '';
+  /** @type {string[]} */
+  const parts = [];
+  if (stylesheets === 'inherit') {
+    for (const el of document.querySelectorAll('style, link[rel~="stylesheet"]')) {
+      if (el.hasAttribute('data-rhtp-reset')) continue;
+      if (el instanceof HTMLStyleElement) {
+        const css = el.textContent ?? '';
+        parts.push(`<style>${mediaPrint ? expandPrintMediaCss(css) : css}</style>`);
+      } else if (el instanceof HTMLLinkElement) {
+        parts.push(`<link rel="stylesheet" href="${escapeAttr(el.href)}"${el.media ? ` media="${escapeAttr(el.media)}"` : ''}>`);
+      }
+    }
+    return parts.join('');
+  }
+  for (const s of stylesheets) {
+    if (/^(https?:)?\/\/|^\.{0,2}\/|\.css(\?|$)/i.test(s) && !s.includes('{')) {
+      parts.push(`<link rel="stylesheet" href="${escapeAttr(s)}">`);
+    } else {
+      parts.push(`<style>${mediaPrint ? expandPrintMediaCss(s) : s}</style>`);
+    }
+  }
+  return parts.join('');
+}
+/**
+ * HTML 文字列中の <style> 内の @media print を展開する。
+ * @param {string} html
+ */
+function expandPrintMedia(html) {
+  return html.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi, (_m, attrs, css) => `<style${attrs}>${expandPrintMediaCss(css)}</style>`);
+}
+/**
+ * `@media print { ... }` ブロックを通常ルールとして展開し、`@media screen { ... }` を除去する。
+ * 単純な括弧の対応で処理する（ネストした @media は想定しない）。
+ * @param {string} css
+ * @returns {string}
+ */
+export function expandPrintMediaCss(css) {
+  let out = '';
+  let i = 0;
+  while (i < css.length) {
+    const m = /@media\s*([^{]+)\{/g;
+    m.lastIndex = i;
+    const hit = m.exec(css);
+    if (!hit) {
+      out += css.slice(i);
+      break;
+    }
+    out += css.slice(i, hit.index);
+    // ブロックの終わりを探す
+    let depth = 1;
+    let j = m.lastIndex;
+    while (j < css.length && depth > 0) {
+      if (css[j] === '{') depth++;
+      else if (css[j] === '}') depth--;
+      j++;
+    }
+    const query = /** @type {string} */ (hit[1]).trim();
+    const body = css.slice(m.lastIndex, j - 1);
+    if (/\bprint\b/.test(query)) out += body;
+    else if (/^\s*(only\s+)?screen\b/.test(query) && !/\band\b/.test(query)) out += '';
+    else out += css.slice(hit.index, j);
+    i = j;
+  }
+  return out;
+}
+/**
+ * 要素の属性を ` name="value"` の並びにする（イベントハンドラ属性は除く）。
+ * @param {Element} el
+ */
+function copyAttrs(el) {
+  let out = '';
+  for (const a of el.attributes) {
+    if (/^on/i.test(a.name)) continue;
+    out += ` ${a.name}="${escapeAttr(a.value)}"`;
+  }
+  return out;
+}
+/** @param {string} s */
+function escapeAttr(s) {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+/** @param {Document} doc */
+async function waitForStylesheets(doc) {
+  const links = [...doc.querySelectorAll('link[rel~="stylesheet"]')];
+  await Promise.all(
+    links.map(
+      (l) =>
+        new Promise((resolve) => {
+          const link = /** @type {HTMLLinkElement} */ (l);
+          if (link.sheet) return resolve(undefined);
+          link.addEventListener('load', () => resolve(undefined), { once: true });
+          link.addEventListener('error', () => resolve(undefined), { once: true });
+          setTimeout(() => resolve(undefined), 10000);
+        }),
+    ),
+  );
+}
+/** @param {Document} doc */
+async function waitForFonts(doc) {
+  // 使用中のフォント読み込みを起動させるためにレイアウトを強制
+  void doc.body.offsetHeight;
+  if (doc.fonts) {
+    await doc.fonts.ready;
+    // ready 後に新たに読み込みが始まることがあるので、loading 状態のものを待つ
+    const loading = [...doc.fonts].filter((f) => f.status === 'loading').map((f) => f.loaded.catch(() => undefined));
+    if (loading.length) await Promise.all(loading);
+    await doc.fonts.ready;
+  }
+}
+/** @param {Document} doc */
+async function waitForImages(doc) {
+  const imgs = [...doc.images];
+  await Promise.all(
+    imgs.map((img) =>
+      img.complete
+        ? img.decode().catch(() => undefined)
+        : new Promise((resolve) => {
+            img.addEventListener('load', () => img.decode().catch(() => undefined).then(resolve), { once: true });
+            img.addEventListener('error', () => resolve(undefined), { once: true });
+            setTimeout(() => resolve(undefined), 10000);
+          }),
+    ),
+  );
+}
+/**
+ * ::before / ::after を実体の <span> に置き換える。
+ * 擬似要素は DOM ノードを持たず Range で計測できないため、computed style をすべて写した span を
+ * 同じ位置に挿入し、元の擬似要素は content: none で消す。文字列 content のみ対応（counter / url は警告）。
+ * @param {Document} doc
+ * @param {(w: import('./index.js').ConversionWarning) => void} warn
+ */
+export function materializePseudoElements(doc, warn) {
+  const win = doc.defaultView;
+  if (!win) return;
+  /** @type {{el: Element, pseudo: 'before'|'after', text: string, styles: [string, string][]}[]} */
+  const jobs = [];
+  for (const el of doc.body.querySelectorAll('*')) {
+    for (const pseudo of /** @type {('before'|'after')[]} */ (['before', 'after'])) {
+      const ps = win.getComputedStyle(el, `::${pseudo}`);
+      const content = ps.content;
+      if (!content || content === 'none' || content === 'normal' || ps.display === 'none') continue;
+      const text = parseContentString(content);
+      if (text === null) {
+        warn({
+          code: 'unsupported-css',
+          message: `::${pseudo} content "${content}" is not supported (only quoted strings are); the pseudo-element is skipped`,
+          element: el,
+          property: 'content',
+        });
+        continue;
+      }
+      /** @type {[string, string][]} */
+      const styles = [];
+      for (let i = 0; i < ps.length; i++) {
+        const prop = /** @type {string} */ (ps[i]);
+        if (prop === 'content' || prop.startsWith('-webkit-') || prop.startsWith('-moz-')) continue;
+        styles.push([prop, ps.getPropertyValue(prop)]);
+      }
+      jobs.push({ el, pseudo, text, styles });
+    }
+  }
+  if (!jobs.length) return;
+  const style = doc.createElement('style');
+  style.setAttribute('data-rhtp-pseudo', '');
+  style.textContent =
+    '[data-rhtp-pseudo-host~="before"]::before{content:none!important;display:none!important}' +
+    '[data-rhtp-pseudo-host~="after"]::after{content:none!important;display:none!important}';
+  doc.head.appendChild(style);
+  for (const job of jobs) {
+    const span = doc.createElement('span');
+    span.setAttribute('data-rhtp-pseudo', job.pseudo);
+    for (const [prop, value] of job.styles) span.style.setProperty(prop, value);
+    span.textContent = job.text;
+    const hosts = (job.el.getAttribute('data-rhtp-pseudo-host') ?? '').split(' ').filter(Boolean);
+    hosts.push(job.pseudo);
+    job.el.setAttribute('data-rhtp-pseudo-host', hosts.join(' '));
+    if (job.pseudo === 'before') job.el.insertBefore(span, job.el.firstChild);
+    else job.el.appendChild(span);
+  }
+}
+/**
+ * computed content 値（'"※ "' / '"a" "b"' / 'counter(x)' …）から文字列を取り出す。
+ * 文字列以外のトークンが含まれる場合は null。
+ * @param {string} value
+ * @returns {string|null}
+ */
+export function parseContentString(value) {
+  let out = '';
+  let i = 0;
+  const v = value.trim();
+  while (i < v.length) {
+    const ch = v[i];
+    if (ch === ' ' || ch === '\t') {
+      i++;
+      continue;
+    }
+    if (ch !== '"' && ch !== "'") return null;
+    const quote = ch;
+    i++;
+    while (i < v.length && v[i] !== quote) {
+      if (v[i] === '\\') {
+        i++;
+        const hex = /^[0-9a-fA-F]{1,6}/.exec(v.slice(i));
+        if (hex) {
+          out += String.fromCodePoint(parseInt(hex[0], 16));
+          i += hex[0].length;
+          if (v[i] === ' ') i++;
+        } else {
+          out += v[i] ?? '';
+          i++;
+        }
+      } else {
+        out += v[i];
+        i++;
+      }
+    }
+    i++; // closing quote
+  }
+  return out;
+}

package/src/units.js ADDED Viewed

@@ -0,0 +1,127 @@
+// @ts-check
+/**
+ * 単位・色の変換ユーティリティ。
+ * 内部座標は CSS px（ブラウザ計測値）で持ち、PDF 出力時に pt へ変換する。
+ */
+/** 1 CSS px = 0.75 pt（96dpi 基準） */
+export const PX_TO_PT = 0.75;
+/** 1 mm = 72 / 25.4 pt */
+export const MM_TO_PT = 72 / 25.4;
+/** @type {Record<string, {width: number, height: number}>} 用紙サイズ（pt） */
+export const PAGE_SIZES = {
+  A3: { width: 297 * MM_TO_PT, height: 420 * MM_TO_PT },
+  A4: { width: 210 * MM_TO_PT, height: 297 * MM_TO_PT },
+  A5: { width: 148 * MM_TO_PT, height: 210 * MM_TO_PT },
+  B4: { width: 257 * MM_TO_PT, height: 364 * MM_TO_PT },
+  B5: { width: 182 * MM_TO_PT, height: 257 * MM_TO_PT },
+  Letter: { width: 612, height: 792 },
+  Legal: { width: 612, height: 1008 },
+};
+/**
+ * CSS 長さ文字列（'15mm', '1in', '12pt', '100px', '2cm'）を pt に変換する。
+ * 単位なしの数値は px とみなす。
+ * @param {string|number} value
+ * @returns {number}
+ */
+export function lengthToPt(value) {
+  if (typeof value === 'number') return value * PX_TO_PT;
+  const m = /^\s*(-?[\d.]+)\s*([a-z%]*)\s*$/i.exec(value);
+  if (!m) throw new Error(`Invalid CSS length: ${value}`);
+  const n = parseFloat(/** @type {string} */ (m[1]));
+  switch ((m[2] ?? '').toLowerCase()) {
+    case '':
+    case 'px':
+      return n * PX_TO_PT;
+    case 'pt':
+      return n;
+    case 'mm':
+      return n * MM_TO_PT;
+    case 'cm':
+      return n * MM_TO_PT * 10;
+    case 'in':
+      return n * 72;
+    case 'pc':
+      return n * 12;
+    default:
+      throw new Error(`Unsupported CSS unit: ${value}`);
+  }
+}
+/** @param {number} pt @returns {number} */
+export function ptToPx(pt) {
+  return pt / PX_TO_PT;
+}
+/**
+ * getComputedStyle が返す px 文字列（'12px'）を数値にする。
+ * @param {string} value
+ * @returns {number}
+ */
+export function cssPx(value) {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+/**
+ * @typedef {{r: number, g: number, b: number, a: number}} Rgba  各成分 0〜1
+ */
+/**
+ * getComputedStyle の色文字列（'rgb(34, 34, 34)' / 'rgba(0, 0, 0, 0.5)' / 'transparent'
+ * / 'color(srgb ...)'）をパースする。パースできない場合は null。
+ * @param {string} value
+ * @returns {Rgba|null}
+ */
+export function parseColor(value) {
+  if (!value) return null;
+  const v = value.trim();
+  if (v === 'transparent') return { r: 0, g: 0, b: 0, a: 0 };
+  let m = /^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/i.exec(v);
+  if (m) {
+    const a = m[4] === undefined ? 1 : m[4].endsWith('%') ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+    return {
+      r: clamp01(parseFloat(/** @type {string} */ (m[1])) / 255),
+      g: clamp01(parseFloat(/** @type {string} */ (m[2])) / 255),
+      b: clamp01(parseFloat(/** @type {string} */ (m[3])) / 255),
+      a: clamp01(a),
+    };
+  }
+  m = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+%?)\s*)?\)$/i.exec(v);
+  if (m) {
+    const a = m[4] === undefined ? 1 : m[4].endsWith('%') ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+    return {
+      r: clamp01(parseFloat(/** @type {string} */ (m[1]))),
+      g: clamp01(parseFloat(/** @type {string} */ (m[2]))),
+      b: clamp01(parseFloat(/** @type {string} */ (m[3]))),
+      a: clamp01(a),
+    };
+  }
+  m = /^#([0-9a-f]{3,8})$/i.exec(v);
+  if (m) {
+    let h = /** @type {string} */ (m[1]);
+    if (h.length === 3 || h.length === 4) h = h.split('').map((c) => c + c).join('');
+    const n = parseInt(h.padEnd(8, 'f'), 16);
+    return { r: ((n >>> 24) & 255) / 255, g: ((n >>> 16) & 255) / 255, b: ((n >>> 8) & 255) / 255, a: (n & 255) / 255 };
+  }
+  return null;
+}
+/** @param {number} n */
+function clamp01(n) {
+  return n < 0 ? 0 : n > 1 ? 1 : n;
+}
+/**
+ * PDF 用に数値を丸めて文字列化する（小数第 3 位まで、末尾ゼロ除去）。
+ * @param {number} n
+ * @returns {string}
+ */
+export function num(n) {
+  if (!Number.isFinite(n)) return '0';
+  const s = n.toFixed(3);
+  const t = s.includes('.') ? s.replace(/\.?0+$/, '') : s;
+  return t === '' || t === '-0' || t === '-' ? '0' : t;
+}