@hidemikimura/receipt-html-to-pdf 0.1.0

package/examples/lit.js

@@ -0,0 +1,52 @@
+// Lit（Web Components）サンプル。
+// 注意: Shadow DOM 内の要素を渡すと、親文書のスタイルシートは継承されない。
+// 変換用の HTML は light DOM に置く、または `stylesheets` オプションで CSS を明示的に渡す。
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { registerFont, htmlToPdf, downloadPdf } from '@hidemikimura/receipt-html-to-pdf';
+
+const fontsReady = Promise.all([
+  registerFont({ family: 'BIZ UDPGothic', weight: 400, src: '/fonts/BIZUDPGothic-Regular.ttf' }),
+  registerFont({ family: 'BIZ UDPGothic', weight: 700, src: '/fonts/BIZUDPGothic-Bold.ttf' }),
+]);
+
+// PDF 側にも同じスタイルを渡す（Shadow DOM の CSS は inherit で拾えないため）
+const RECEIPT_CSS = `
+  @font-face { font-family: "BIZ UDPGothic"; font-weight: 400; src: url("/fonts/BIZUDPGothic-Regular.ttf"); }
+  @font-face { font-family: "BIZ UDPGothic"; font-weight: 700; src: url("/fonts/BIZUDPGothic-Bold.ttf"); }
+  .receipt { font-family: "BIZ UDPGothic", sans-serif; width: 180mm; }
+  .receipt h1 { text-align: center; letter-spacing: .5em; }
+  .amount { font-size: 24pt; font-weight: 700; text-align: center; }
+`;
+
+export class ReceiptPdf extends LitElement {
+  static properties = { customer: {}, total: { type: Number }, busy: { state: true } };
+  static styles = [css`:host { display: block; }`, unsafeCSS(RECEIPT_CSS)];
+
+  async download() {
+    this.busy = true;
+    try {
+      await fontsReady;
+      const el = this.renderRoot.querySelector('.receipt');
+      const pdf = await htmlToPdf(el, {
+        stylesheets: [RECEIPT_CSS],
+        page: { size: 'A4', margin: '15mm' },
+        metadata: { title: '領収証' },
+      });
+      downloadPdf(pdf, 'receipt.pdf');
+    } finally {
+      this.busy = false;
+    }
+  }
+
+  render() {
+    return html`
+      <button @click=${this.download} ?disabled=${this.busy}>${this.busy ? '変換中…' : 'PDF をダウンロード'}</button>
+      <article class="receipt">
+        <h1>領収証</h1>
+        <p>${this.customer} 御中</p>
+        <p class="amount">￥${this.total?.toLocaleString('ja-JP')}-</p>
+      </article>
+    `;
+  }
+}
+customElements.define('receipt-pdf', ReceiptPdf);

package/examples/react.jsx

@@ -0,0 +1,56 @@
+// React サンプル（JSX）。バンドラー（Vite など）で使う想定。
+import { useEffect, useRef, useState } from 'react';
+import { registerFont, htmlToPdf, downloadPdf } from '@hidemikimura/receipt-html-to-pdf';
+
+// モジュール読み込み時に 1 回だけフォントを登録する
+const fontsReady = Promise.all([
+  registerFont({ family: 'BIZ UDPGothic', weight: 400, src: '/fonts/BIZUDPGothic-Regular.ttf' }),
+  registerFont({ family: 'BIZ UDPGothic', weight: 700, src: '/fonts/BIZUDPGothic-Bold.ttf' }),
+]);
+
+export function ReceiptPdfButton({ receiptRef, filename = 'receipt.pdf' }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function handleClick() {
+    setBusy(true);
+    setError(null);
+    try {
+      await fontsReady;
+      const pdf = await htmlToPdf(receiptRef.current, {
+        page: { size: 'A4', margin: '15mm' },
+        footer: '<div style="text-align:center;font-size:8pt">{{pageNumber}} / {{totalPages}}</div>',
+        onWarning: (w) => console.warn(w.code, w.message),
+      });
+      downloadPdf(pdf, filename);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <button onClick={handleClick} disabled={busy}>{busy ? '変換中…' : 'PDF をダウンロード'}</button>
+      {error && <span role="alert">{error}</span>}
+    </>
+  );
+}
+
+export function ReceiptPage({ receipt }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    // 変換対象の要素はスタイルシート（@font-face 含む）が適用された状態で DOM 上にあること
+  }, []);
+  return (
+    <div>
+      <ReceiptPdfButton receiptRef={ref} filename={`receipt-${receipt.no}.pdf`} />
+      <article ref={ref} className="receipt">
+        <h1>領収証</h1>
+        <p>{receipt.customer} 御中</p>
+        <p className="amount">￥{receipt.total.toLocaleString('ja-JP')}-</p>
+      </article>
+    </div>
+  );
+}

package/examples/vanilla.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<title>Receipt html to pdf — Vanilla JS サンプル</title>
+<style>
+  @font-face { font-family: "BIZ UDPGothic"; font-weight: 400; src: url("../fonts/BIZUDPGothic-Regular.ttf"); }
+  @font-face { font-family: "BIZ UDPGothic"; font-weight: 700; src: url("../fonts/BIZUDPGothic-Bold.ttf"); }
+  body { font-family: "BIZ UDPGothic", sans-serif; margin: 24px; }
+  #receipt { width: 180mm; border: 1px solid #ccc; padding: 10mm; box-sizing: border-box; }
+  h1 { text-align: center; letter-spacing: .5em; }
+  .amount { font-size: 24pt; font-weight: 700; text-align: center; margin: 8mm 0; }
+</style>
+</head>
+<body>
+<button id="download">PDF をダウンロード</button>
+<span id="status"></span>
+
+<article id="receipt">
+  <h1>領収証</h1>
+  <p>株式会社テスト商事 御中</p>
+  <p class="amount">￥41,936-</p>
+  <p>但し、商品代として上記金額を正に領収いたしました。</p>
+</article>
+
+<script type="module">
+  // 同じリポジトリ内で試す場合。npm でインストールした場合は
+  //   import { registerFont, htmlToPdf, downloadPdf } from '@hidemikimura/receipt-html-to-pdf';
+  import { registerFont, htmlToPdf, downloadPdf } from '../src/index.js';
+
+  // フォントは 1 回だけ登録する（@font-face と同じファイルを渡す）
+  const fontsReady = Promise.all([
+    registerFont({ family: 'BIZ UDPGothic', weight: 400, src: '../fonts/BIZUDPGothic-Regular.ttf' }),
+    registerFont({ family: 'BIZ UDPGothic', weight: 700, src: '../fonts/BIZUDPGothic-Bold.ttf' }),
+  ]);
+
+  document.getElementById('download').addEventListener('click', async () => {
+    const status = document.getElementById('status');
+    status.textContent = '変換中…';
+    try {
+      await fontsReady;
+      const pdf = await htmlToPdf(document.getElementById('receipt'), {
+        page: { size: 'A4', margin: '15mm' },
+        metadata: { title: '領収証', author: '株式会社サンプル商店' },
+        onWarning: (w) => console.warn('[receipt-html-to-pdf]', w.code, w.message),
+      });
+      downloadPdf(pdf, 'receipt.pdf');
+      status.textContent = `完了（${Math.round(pdf.size / 1024)} KB）`;
+    } catch (e) {
+      status.textContent = `失敗: ${e.message}`;
+    }
+  });
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@hidemikimura/receipt-html-to-pdf",
+  "version": "0.1.0",
+  "description": "Receipt html to pdf — ブラウザ内で HTML/CSS をテキスト選択可能なベクター PDF に変換するライブラリ（日本の領収証・適格請求書向け）",
+  "license": "MIT",
+  "author": "Hidemi Kimura",
+  "homepage": "https://github.com/hidemikimura/receipt-html-to-pdf#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hidemikimura/receipt-html-to-pdf.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hidemikimura/receipt-html-to-pdf/issues"
+  },
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./min": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/receipt-html-to-pdf.min.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist/receipt-html-to-pdf.min.js",
+    "dist/receipt-html-to-pdf.min.js.map",
+    "types",
+    "examples",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "typecheck": "tsc -p jsconfig.json",
+    "types": "tsc -p jsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir types",
+    "build": "node scripts/build.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:browser": "playwright test",
+    "e2e": "node scripts/e2e.mjs && node scripts/verify.mjs && node scripts/e2e.mjs receipt-invoice reissue && node scripts/verify.mjs receipt-invoice reissue && node scripts/e2e.mjs receipt-invoice-long && node scripts/verify.mjs receipt-invoice-long",
+    "fixtures": "node scripts/gen-fixture-long.mjs",
+    "fonts": "sh scripts/fetch-fonts.sh",
+    "dev": "npx --yes serve -l 5173 .",
+    "prepublishOnly": "npm run typecheck && npm test && npm run types && npm run build -- --check",
+    "pack:check": "npm pack --dry-run"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0",
+    "esbuild": "^0.28.2",
+    "pdfjs-dist": "^4.10.0",
+    "pixelmatch": "^7.2.0",
+    "pngjs": "^7.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "pdf",
+    "html-to-pdf",
+    "receipt",
+    "invoice",
+    "browser",
+    "vector",
+    "japanese",
+    "invoice-jp",
+    "receipt-jp",
+    "vector-pdf",
+    "truetype-subset"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/font/cid.js

@@ -0,0 +1,187 @@
+// @ts-check
+/**
+ * サブセット化した TrueType を PDF の Type0 / CIDFontType2 として埋め込む。
+ * CID = サブセット後の GID（CIDToGIDMap /Identity）、エンコーディングは Identity-H。
+ * ToUnicode CMap を必ず付けてテキスト選択・検索・コピーを保証する。
+ */
+import { Raw } from '../pdf/writer.js';
+import { subsetFont } from './subset.js';
+
+/**
+ * PDF に埋め込む 1 フォント分の使用状況。
+ * 走査中に addGlyph でグリフを集め、最後に embed で PDF オブジェクトを生成する。
+ */
+export class EmbeddedFont {
+  /**
+   * @param {import('./parse.js').ParsedFont} font
+   * @param {string} resourceName ページリソース名（F1 など）
+   */
+  constructor(font, resourceName) {
+    this.font = font;
+    this.resourceName = resourceName;
+    /** @type {Map<number, number>} 旧 GID → 代表コードポイント（ToUnicode 用） */
+    this.usedGids = new Map();
+    /** @type {import('./subset.js').SubsetResult|null} */
+    this.subset = null;
+  }
+
+  /**
+   * @param {number} gid 旧 GID
+   * @param {number} codePoint
+   */
+  addGlyph(gid, codePoint) {
+    if (!this.usedGids.has(gid)) this.usedGids.set(gid, codePoint);
+  }
+
+  /**
+   * 旧 GID を PDF 上の CID（サブセット後 GID）へ変換する。embed 後にのみ有効。
+   * @param {number} gid
+   * @returns {number}
+   */
+  cid(gid) {
+    if (!this.subset) throw new Error('EmbeddedFont: embed() must be called before cid()');
+    return this.subset.gidMap.get(gid) ?? 0;
+  }
+
+  /**
+   * サブセット化を確定させる。以後 cid() が使える。
+   */
+  finalize() {
+    if (!this.subset) this.subset = subsetFont(this.font, this.usedGids.keys());
+    return this.subset;
+  }
+
+  /**
+   * PDF オブジェクト群を書き込み、Type0 フォント辞書への参照を返す。
+   * @param {import('../pdf/writer.js').PdfWriter} writer
+   * @returns {Promise<import('../pdf/writer.js').Ref>}
+   */
+  async embed(writer) {
+    const subset = this.finalize();
+    const f = this.font;
+    const scale = 1000 / f.unitsPerEm;
+    const tag = subsetTag(this.usedGids);
+    const baseFont = `${tag}+${f.postScriptName}`;
+
+    const fontFile = await writer.addStream({ Length1: subset.data.length }, subset.data);
+
+    // フラグ: bit 3 (Symbolic) を立てる。Nonsymbolic と排他。Italic は bit 7、ForceBold は bit 19。
+    let flags = 4;
+    if (f.italic) flags |= 1 << 6;
+    if (f.bold) flags |= 1 << 18;
+
+    const descriptor = writer.add({
+      Type: 'FontDescriptor',
+      FontName: baseFont,
+      Flags: flags,
+      FontBBox: f.bbox.map((v) => Math.round(v * scale)),
+      ItalicAngle: f.italicAngle,
+      Ascent: Math.round(f.ascender * scale),
+      Descent: Math.round(f.descender * scale),
+      CapHeight: Math.round(f.capHeight * scale),
+      StemV: f.bold ? 120 : 80,
+      FontFile2: fontFile,
+    });
+
+    // W 配列: 連続 CID をまとめる  c [w1 w2 ...] 形式
+    /** @type {import('../pdf/writer.js').PdfValue[]} */
+    const W = [];
+    const widths = subset.oldGids.map((g) => Math.round((f.advances[g] ?? 0) * scale));
+    let i = 0;
+    while (i < widths.length) {
+      let j = i;
+      while (j + 1 < widths.length && j - i < 100) j++;
+      W.push(i, widths.slice(i, j + 1));
+      i = j + 1;
+    }
+
+    const cidFont = writer.add({
+      Type: 'Font',
+      Subtype: 'CIDFontType2',
+      BaseFont: baseFont,
+      CIDSystemInfo: { Registry: new Raw('(Adobe)'), Ordering: new Raw('(Identity)'), Supplement: 0 },
+      FontDescriptor: descriptor,
+      DW: 1000,
+      W,
+      CIDToGIDMap: 'Identity',
+    });
+
+    const toUnicode = await writer.addStream({}, buildToUnicode(subset, this.usedGids));
+
+    return writer.add({
+      Type: 'Font',
+      Subtype: 'Type0',
+      BaseFont: baseFont,
+      Encoding: 'Identity-H',
+      DescendantFonts: [cidFont],
+      ToUnicode: toUnicode,
+    });
+  }
+}
+
+/**
+ * サブセットフォント名の接頭辞（6 文字の大文字）。使用グリフ集合から決定的に生成する。
+ * @param {Map<number, number>} usedGids
+ * @returns {string}
+ */
+function subsetTag(usedGids) {
+  let h = 2166136261;
+  for (const g of usedGids.keys()) {
+    h ^= g;
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  let tag = '';
+  for (let i = 0; i < 6; i++) {
+    tag += String.fromCharCode(65 + (h % 26));
+    h = Math.floor(h / 26);
+  }
+  return tag;
+}
+
+/**
+ * ToUnicode CMap（bfchar 形式）を生成する。
+ * @param {import('./subset.js').SubsetResult} subset
+ * @param {Map<number, number>} usedGids 旧 GID → コードポイント
+ * @returns {Uint8Array}
+ */
+function buildToUnicode(subset, usedGids) {
+  /** @type {string[]} */
+  const entries = [];
+  subset.oldGids.forEach((oldGid, cid) => {
+    const cp = usedGids.get(oldGid);
+    if (cp === undefined) return;
+    entries.push(`<${hex4(cid)}> <${utf16Hex(cp)}>`);
+  });
+
+  let body = '';
+  for (let i = 0; i < entries.length; i += 100) {
+    const chunk = entries.slice(i, i + 100);
+    body += `${chunk.length} beginbfchar\n${chunk.join('\n')}\nendbfchar\n`;
+  }
+
+  const cmap =
+    `/CIDInit /ProcSet findresource begin\n` +
+    `12 dict begin\nbegincmap\n` +
+    `/CIDSystemInfo << /Registry (Adobe) /Ordering (UCS) /Supplement 0 >> def\n` +
+    `/CMapName /Adobe-Identity-UCS def\n/CMapType 2 def\n` +
+    `1 begincodespacerange\n<0000> <FFFF>\nendcodespacerange\n` +
+    body +
+    `endcmap\nCMapName currentdict /CMap defineresource pop\nend\nend\n`;
+  return new TextEncoder().encode(cmap);
+}
+
+/** @param {number} n */
+export function hex4(n) {
+  return n.toString(16).toUpperCase().padStart(4, '0');
+}
+
+/**
+ * コードポイントを UTF-16BE の 16 進表記にする（サロゲートペア対応）。
+ * @param {number} cp
+ */
+function utf16Hex(cp) {
+  if (cp <= 0xffff) return hex4(cp);
+  const v = cp - 0x10000;
+  return hex4(0xd800 + (v >> 10)) + hex4(0xdc00 + (v & 0x3ff));
+}
+