@hidemikimura/receipt-html-to-pdf 0.1.0

package/src/font/subset.js

@@ -0,0 +1,211 @@
+// @ts-check
+/**
+ * TrueType サブセッター。
+ * 使用グリフ（と複合グリフが参照するコンポーネント）だけを含む新しい sfnt を組み立てる。
+ * GID は 0 から詰め直され、旧 GID → 新 GID の対応表を返す。
+ * cmap は出力しない（PDF 側では CIDToGIDMap /Identity で CID = 新 GID として扱う）。
+ */
+import { glyphData, componentGids } from './parse.js';
+import { concat } from '../pdf/writer.js';
+
+/**
+ * @typedef {object} SubsetResult
+ * @property {Uint8Array} data          サブセット化されたフォントファイル
+ * @property {Map<number, number>} gidMap  旧 GID → 新 GID
+ * @property {number[]} oldGids         新 GID 順に並んだ旧 GID
+ */
+
+/**
+ * @param {import('./parse.js').ParsedFont} font
+ * @param {Iterable<number>} usedGids
+ * @returns {SubsetResult}
+ */
+export function subsetFont(font, usedGids) {
+  // 1. グリフ集合を閉包する（複合グリフのコンポーネントを再帰的に追加）
+  /** @type {Set<number>} */
+  const set = new Set([0]);
+  const stack = [...usedGids];
+  while (stack.length) {
+    const gid = /** @type {number} */ (stack.pop());
+    if (gid < 0 || gid >= font.numGlyphs || set.has(gid)) continue;
+    set.add(gid);
+    for (const c of componentGids(glyphData(font, gid))) if (!set.has(c)) stack.push(c);
+  }
+  const oldGids = [...set].sort((a, b) => a - b);
+  /** @type {Map<number, number>} */
+  const gidMap = new Map();
+  oldGids.forEach((g, i) => gidMap.set(g, i));
+  const n = oldGids.length;
+
+  // 2. glyf / loca
+  /** @type {Uint8Array[]} */
+  const glyphChunks = [];
+  const loca = new Uint32Array(n + 1);
+  let glyfLen = 0;
+  for (let i = 0; i < n; i++) {
+    let g = glyphData(font, /** @type {number} */ (oldGids[i]));
+    if (g.length && new DataView(g.buffer, g.byteOffset, g.byteLength).getInt16(0) < 0) {
+      g = remapComposite(g, gidMap);
+    }
+    loca[i] = glyfLen;
+    glyphChunks.push(g);
+    glyfLen += g.length;
+    const pad = (4 - (glyfLen % 4)) % 4;
+    if (pad) {
+      glyphChunks.push(new Uint8Array(pad));
+      glyfLen += pad;
+    }
+  }
+  loca[n] = glyfLen;
+  const glyf = concat(glyphChunks);
+  const locaBytes = new Uint8Array(loca.length * 4);
+  const ldv = new DataView(locaBytes.buffer);
+  loca.forEach((v, i) => ldv.setUint32(i * 4, v));
+
+  // 3. hmtx（全グリフ分の advance + lsb を書く）
+  const origHmtx = /** @type {{offset: number, length: number}} */ (font.tables.get('hmtx'));
+  const origHhea = /** @type {{offset: number, length: number}} */ (font.tables.get('hhea'));
+  const fdv = new DataView(font.data.buffer, font.data.byteOffset, font.data.byteLength);
+  const numberOfHMetrics = fdv.getUint16(origHhea.offset + 34);
+  const hmtx = new Uint8Array(n * 4);
+  const hdv = new DataView(hmtx.buffer);
+  for (let i = 0; i < n; i++) {
+    const old = /** @type {number} */ (oldGids[i]);
+    const lsbOffset =
+      old < numberOfHMetrics
+        ? origHmtx.offset + old * 4 + 2
+        : origHmtx.offset + numberOfHMetrics * 4 + (old - numberOfHMetrics) * 2;
+    hdv.setUint16(i * 4, font.advances[old] ?? 0);
+    hdv.setInt16(i * 4 + 2, lsbOffset + 2 <= font.data.byteLength ? fdv.getInt16(lsbOffset) : 0);
+  }
+
+  // 4. head / hhea / maxp をコピーして書き換え
+  const head = copyTable(font, 'head');
+  const headDv = new DataView(head.buffer);
+  headDv.setUint32(8, 0); // checkSumAdjustment（後で計算）
+  headDv.setInt16(50, 1); // indexToLocFormat = long
+
+  const hhea = copyTable(font, 'hhea');
+  new DataView(hhea.buffer).setUint16(34, n);
+
+  const maxp = copyTable(font, 'maxp');
+  new DataView(maxp.buffer).setUint16(4, n);
+
+  // 5. テーブル群を組み立てる（タグ順にソート）
+  /** @type {[string, Uint8Array][]} */
+  const tables = [
+    ['glyf', glyf],
+    ['head', head],
+    ['hhea', hhea],
+    ['hmtx', hmtx],
+    ['loca', locaBytes],
+    ['maxp', maxp],
+  ];
+  for (const opt of ['cvt ', 'fpgm', 'prep']) {
+    if (font.tables.has(opt)) tables.push([opt, copyTable(font, opt)]);
+  }
+  tables.sort((a, b) => (a[0] < b[0] ? -1 : 1));
+
+  const data = buildSfnt(tables);
+  return { data, gidMap, oldGids };
+}
+
+/**
+ * @param {import('./parse.js').ParsedFont} font
+ * @param {string} tag
+ * @returns {Uint8Array}
+ */
+function copyTable(font, tag) {
+  const t = font.tables.get(tag);
+  if (!t) throw new Error(`missing table ${tag}`);
+  // Node の Buffer は slice がビューを返すため、必ずコピーを作る
+  return new Uint8Array(font.data.subarray(t.offset, t.offset + t.length));
+}
+
+/**
+ * 複合グリフ内のコンポーネント GID を新 GID に書き換える。
+ * @param {Uint8Array} g
+ * @param {Map<number, number>} gidMap
+ * @returns {Uint8Array}
+ */
+function remapComposite(g, gidMap) {
+  const out = new Uint8Array(g);
+  const dv = new DataView(out.buffer);
+  let p = 10;
+  for (;;) {
+    const flags = dv.getUint16(p);
+    const oldGid = dv.getUint16(p + 2);
+    dv.setUint16(p + 2, gidMap.get(oldGid) ?? 0);
+    p += 4;
+    p += flags & 0x0001 ? 4 : 2;
+    if (flags & 0x0008) p += 2;
+    else if (flags & 0x0040) p += 4;
+    else if (flags & 0x0080) p += 8;
+    if (!(flags & 0x0020)) break;
+    if (p >= out.length) break;
+  }
+  return out;
+}
+
+/**
+ * テーブル群から sfnt ファイルを組み立てる。
+ * @param {[string, Uint8Array][]} tables タグ順にソート済み
+ * @returns {Uint8Array}
+ */
+function buildSfnt(tables) {
+  const numTables = tables.length;
+  let entrySelector = 0;
+  while (1 << (entrySelector + 1) <= numTables) entrySelector++;
+  const searchRange = (1 << entrySelector) * 16;
+  const rangeShift = numTables * 16 - searchRange;
+
+  const dirLen = 12 + numTables * 16;
+  let offset = dirLen;
+  /** @type {{tag: string, data: Uint8Array, offset: number, checksum: number}[]} */
+  const entries = [];
+  for (const [tag, data] of tables) {
+    entries.push({ tag, data, offset, checksum: checksum(data) });
+    offset += (data.length + 3) & ~3;
+  }
+
+  const out = new Uint8Array(offset);
+  const dv = new DataView(out.buffer);
+  dv.setUint32(0, 0x00010000);
+  dv.setUint16(4, numTables);
+  dv.setUint16(6, searchRange);
+  dv.setUint16(8, entrySelector);
+  dv.setUint16(10, rangeShift);
+  entries.forEach((e, i) => {
+    const p = 12 + i * 16;
+    for (let k = 0; k < 4; k++) out[p + k] = e.tag.charCodeAt(k);
+    dv.setUint32(p + 4, e.checksum);
+    dv.setUint32(p + 8, e.offset);
+    dv.setUint32(p + 12, e.data.length);
+    out.set(e.data, e.offset);
+  });
+
+  // head.checkSumAdjustment = 0xB1B0AFBA - checksum(whole font)
+  const headEntry = entries.find((e) => e.tag === 'head');
+  if (headEntry) {
+    const total = checksum(out);
+    dv.setUint32(headEntry.offset + 8, (0xb1b0afba - total) >>> 0);
+  }
+  return out;
+}
+
+/**
+ * @param {Uint8Array} data
+ * @returns {number}
+ */
+function checksum(data) {
+  let sum = 0;
+  const n = data.length;
+  for (let i = 0; i < n; i += 4) {
+    const b0 = data[i] ?? 0;
+    const b1 = data[i + 1] ?? 0;
+    const b2 = data[i + 2] ?? 0;
+    const b3 = data[i + 3] ?? 0;
+    sum = (sum + (((b0 << 24) | (b1 << 16) | (b2 << 8) | b3) >>> 0)) >>> 0;
+  }
+  return sum;
+}

package/src/index.js

@@ -0,0 +1,239 @@
+// @ts-check
+/**
+ * Receipt html to pdf — 公開 API
+ *
+ * ブラウザ内で HTML/CSS をテキスト選択可能なベクター PDF に変換する。
+ * 設計書: docs/design.md
+ */
+import { FontRegistry } from './font/registry.js';
+import { renderDocument } from './renderer.js';
+import { walk } from './walker/walk.js';
+import { resolvePage, buildPdf } from './page.js';
+import { PX_TO_PT } from './units.js';
+
+export { expandPrintMediaCss } from './renderer.js';
+
+/**
+ * 登録するフォントの定義。
+ * `src` は TrueType アウトライン（glyf）を持つ静的 TTF のみ対応。
+ *
+ * @typedef {object} FontSource
+ * @property {string} family        CSS の font-family と一致させる名前
+ * @property {number} [weight=400]  100〜900
+ * @property {'normal'|'italic'} [style='normal']
+ * @property {string|ArrayBuffer|Uint8Array} src  URL または フォントファイルのバイト列
+ */
+
+/**
+ * 用紙サイズ。既定名か、幅・高さを CSS 長さ（'80mm' など）で指定する。
+ *
+ * @typedef {'A3'|'A4'|'A5'|'B4'|'B5'|'Letter'|'Legal'|{width: string, height: string}} PageSize
+ */
+
+/**
+ * @typedef {object} PageOptions
+ * @property {PageSize} [size='A4']
+ * @property {'portrait'|'landscape'} [orientation='portrait']
+ * @property {string|{top: string, right: string, bottom: string, left: string}} [margin='15mm']
+ */
+
+/**
+ * @typedef {object} PdfMetadata
+ * @property {string} [title]
+ * @property {string} [author]
+ * @property {string} [subject]
+ * @property {string} [keywords]
+ * @property {string} [creator]
+ * @property {Date}   [creationDate]
+ */
+
+/**
+ * 変換中に発生した非致命的な問題。例外にはせず onWarning に流す。
+ *
+ * @typedef {object} ConversionWarning
+ * @property {'unsupported-css'|'missing-font'|'missing-glyph'|'image-failed'|'other'} code
+ * @property {string} message
+ * @property {Element} [element]
+ * @property {string} [property]   unsupported-css のときの CSS プロパティ名
+ * @property {string} [text]       missing-glyph のときの該当文字
+ */
+
+/**
+ * @typedef {object} ConvertOptions
+ * @property {PageOptions} [page]
+ * @property {string[]} [fontFallback]           未登録ファミリーが要求されたときに試す family の順序
+ * @property {'inherit'|'none'|string[]} [stylesheets='inherit']  親文書のスタイルを継承するか、URL/CSS テキストを明示するか
+ * @property {boolean} [mediaPrint=false]        `@media print` ルールを通常ルールとして適用する
+ * @property {boolean} [compress=true]           CompressionStream が使えれば FlateDecode を適用する
+ * @property {PdfMetadata} [metadata]
+ * @property {string|null} [header=null]         各ページ上部の HTML テンプレート。{{pageNumber}} {{totalPages}} を置換する
+ * @property {string|null} [footer=null]         各ページ下部の HTML テンプレート。同上
+ * @property {'font'|'measure'|'auto'} [textMeasure='auto']  グリフ位置の決め方（現在は常に実測）
+ * @property {'blob'|'uint8array'|'dataurl'} [output='blob']
+ * @property {string} [baseUrl]                  相対 URL（フォント・画像）の基準。既定は現在の文書
+ * @property {(warning: ConversionWarning) => void} [onWarning]
+ */
+
+/**
+ * 変換の入力。DOM 要素、または HTML 文字列。
+ * @typedef {Element|string} ConvertInput
+ */
+
+/** ライブラリのバージョン（package.json と同期） */
+export const version = '0.1.0';
+
+/** モジュール共有のフォントレジストリ */
+const registry = new FontRegistry();
+
+/**
+ * フォントを登録する。同じ family/weight/style を再登録した場合は上書きする。
+ * パース結果はモジュール内にキャッシュされ、以降の htmlToPdf 呼び出しで再利用される。
+ *
+ * @param {FontSource} font
+ * @returns {Promise<void>}
+ */
+export async function registerFont(font) {
+  if (!font || !font.family || !font.src) throw new TypeError('registerFont: { family, src } are required');
+  const entry = await registry.register(font);
+  if (entry.parsed.variable) {
+    console.warn(
+      `[receipt-html-to-pdf] "${font.family}" is a variable font; only the default instance outlines are embedded. ` +
+        'Use static TTF instances for other weights.',
+    );
+  }
+}
+
+/**
+ * 登録済みフォントの一覧（デバッグ用）。
+ * @returns {{family: string, weight: number, style: string, glyphs: number}[]}
+ */
+export function listFonts() {
+  return registry.fonts.map((f) => ({ family: f.displayFamily, weight: f.weight, style: f.style, glyphs: f.parsed.numGlyphs }));
+}
+
+/**
+ * HTML を PDF に変換する。
+ *
+ * @param {ConvertInput} input
+ * @param {ConvertOptions} [options]
+ * @returns {Promise<Blob|Uint8Array|string>} options.output に応じた PDF
+ */
+export async function htmlToPdf(input, options = {}) {
+  if (typeof document === 'undefined') throw new Error('htmlToPdf must run in a browser (needs DOM layout)');
+  if (registry.fonts.length === 0) {
+    throw new Error('htmlToPdf: no fonts registered. Call registerFont() with at least one TrueType font first.');
+  }
+  const warn = options.onWarning ?? (() => {});
+  const geo = resolvePage(options.page);
+  const widthPx = (geo.width - geo.left - geo.right) / PX_TO_PT;
+
+  const rendered = await renderDocument(input, {
+    widthPx,
+    stylesheets: options.stylesheets ?? 'inherit',
+    mediaPrint: options.mediaPrint ?? false,
+    baseUrl: options.baseUrl,
+    warn,
+  });
+
+  /** @type {import('./walker/walk.js').WalkContext} */
+  const walkCtx = {
+    registry,
+    fontFallback: options.fontFallback ?? [],
+    warn,
+    textMeasure: options.textMeasure ?? 'auto',
+  };
+  const renderOpts = {
+    widthPx,
+    stylesheets: options.stylesheets ?? 'inherit',
+    mediaPrint: options.mediaPrint ?? false,
+    baseUrl: options.baseUrl,
+    warn,
+  };
+
+  try {
+    const body = await walk(rendered.root, walkCtx);
+    const header = options.header ? await makeDecoration(options.header, renderOpts, walkCtx) : null;
+    const footer = options.footer ? await makeDecoration(options.footer, renderOpts, walkCtx) : null;
+    const bytes = await buildPdf(body, geo, {
+      compress: options.compress ?? true,
+      metadata: options.metadata,
+      header,
+      footer,
+    });
+    return toOutput(bytes, options.output ?? 'blob');
+  } finally {
+    rendered.destroy();
+  }
+}
+
+/**
+ * ヘッダー／フッターのテンプレートを描画する準備をする。
+ * 高さは 1 ページ目相当（{{pageNumber}} = {{totalPages}} = 1）で測り、全ページ同じとみなす。
+ * @param {string} template
+ * @param {Parameters<typeof renderDocument>[1]} renderOpts
+ * @param {import('./walker/walk.js').WalkContext} walkCtx
+ * @returns {Promise<import('./page.js').PageDecoration>}
+ */
+async function makeDecoration(template, renderOpts, walkCtx) {
+  const renderOnce = async (/** @type {number} */ page, /** @type {number} */ total) => {
+    const html = template.replace(/\{\{\s*pageNumber\s*\}\}/g, String(page)).replace(/\{\{\s*totalPages\s*\}\}/g, String(total));
+    const rendered = await renderDocument(html, renderOpts);
+    try {
+      return await walk(rendered.root, walkCtx);
+    } finally {
+      rendered.destroy();
+    }
+  };
+  const probe = await renderOnce(1, 1);
+  /** @type {Map<string, import('./walker/walk.js').WalkResult>} */
+  const cache = new Map([['1/1', probe]]);
+  return {
+    heightPx: probe.height,
+    render: async (page, total) => {
+      const key = `${page}/${total}`;
+      let r = cache.get(key);
+      if (!r) {
+        r = await renderOnce(page, total);
+        cache.set(key, r);
+      }
+      return r;
+    },
+  };
+}
+
+/**
+ * @param {Uint8Array} bytes
+ * @param {'blob'|'uint8array'|'dataurl'} output
+ * @returns {Blob|Uint8Array|string}
+ */
+function toOutput(bytes, output) {
+  if (output === 'uint8array') return bytes;
+  if (output === 'dataurl') {
+    let bin = '';
+    for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    return 'data:application/pdf;base64,' + btoa(bin);
+  }
+  return new Blob([/** @type {Uint8Array<ArrayBuffer>} */ (bytes)], { type: 'application/pdf' });
+}
+
+/**
+ * 生成した PDF をブラウザでダウンロードさせる補助関数。
+ *
+ * @param {Blob|Uint8Array} pdf
+ * @param {string} filename
+ * @returns {void}
+ */
+export function downloadPdf(pdf, filename) {
+  const blob =
+    pdf instanceof Blob
+      ? pdf
+      : new Blob([/** @type {Uint8Array<ArrayBuffer>} */ (pdf)], { type: 'application/pdf' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}