npm - @hidemikimura/receipt-html-to-pdf - Versions diffs - 0.2.0 → 0.2.1 - Mend

@hidemikimura/receipt-html-to-pdf 0.2.0 → 0.2.1

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 (11) hide show

package/CHANGELOG.md +17 -0
package/README.md +20 -4
package/dist/receipt-html-to-pdf.min.js +6 -6
package/dist/receipt-html-to-pdf.min.js.map +3 -3
package/examples/cdn.html +110 -0
package/package.json +1 -1
package/skills/receipt-html-to-pdf/SKILL.md +13 -0
package/skills/receipt-html-to-pdf/references/troubleshooting.md +1 -0
package/src/index.js +1 -1
package/src/renderer.js +27 -1
package/types/index.d.ts +1 -1

package/examples/cdn.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!--
+  CDN から読み込むだけの例。npm もバンドラーもビルドも要らない。
+  このファイルをブラウザで開けばそのまま動く（`npx serve` などローカルサーバー経由が確実）。
+  ライブラリ本体もフォントも CDN から読む。フォントは 4.6MB あるので、実運用では
+  使う文字に絞ってサブセット化したものを自前で配信すること（pyftsubset など）。
+-->
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<title>Receipt html to pdf — CDN から使う例</title>
+<style>
+  /* PDF に埋め込むフォントと、ブラウザが計測に使うフォントは同じファイルにする */
+  @font-face {
+    font-family: "BIZ UDPGothic";
+    font-weight: 400;
+    /* registerFont に渡すファイルと必ず同じものにする。違うと文字幅がずれる */
+    src: url("https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/bizudpgothic/BIZUDPGothic-Regular.ttf") format("truetype");
+  }
+  body { font-family: system-ui, sans-serif; margin: 24px; line-height: 1.6; }
+  button { font-size: 15px; padding: 8px 16px; cursor: pointer; }
+  button[disabled] { cursor: default; opacity: .5; }
+  #status { margin-left: 12px; color: #555; font-size: 14px; }
+  /* 変換対象。用紙幅に合わせて組む */
+  /* 幅は A4（210mm）から左右の余白 15mm ずつを引いた 180mm ちょうど。
+     box-sizing: border-box を忘れると padding と border の分だけはみ出し、右端が切れる */
+  #receipt { font-family: "BIZ UDPGothic", sans-serif; font-size: 10pt; color: #222; width: 180mm; box-sizing: border-box; border: 1px solid #ccc; padding: 5mm; margin-top: 16px; }
+  #receipt h1 { text-align: center; font-size: 20pt; letter-spacing: .5em; margin: 0 0 6mm; padding-bottom: 2mm; border-bottom: 2px solid #222; }
+  #receipt .to { font-size: 13pt; font-weight: 700; border-bottom: 1px solid #222; padding: 0 2mm 1mm; min-width: 70mm; display: inline-block; }
+  #receipt .amount { font-size: 24pt; font-weight: 700; text-align: center; border: 1px solid #222; padding: 4mm; margin: 4mm 0; }
+  #receipt table { width: 100%; border-collapse: collapse; margin-top: 4mm; }
+  #receipt th, #receipt td { border: 1px solid #222; padding: 1.5mm 2mm; }
+  #receipt th { background: #f2f2f2; }
+  #receipt td.num { text-align: right; }
+</style>
+</head>
+<body>
+<button id="save" disabled>PDF をダウンロード</button>
+<span id="status">読み込み中…</span>
+<div id="receipt">
+  <h1>領 収 証</h1>
+  <p><span class="to">株式会社テスト商事　御中</span></p>
+  <p class="amount">￥33,000-（税込）</p>
+  <p>但し、下記の通り商品代として、上記金額を正に領収いたしました。</p>
+  <table>
+    <thead>
+      <tr><th>品名</th><th>数量</th><th>単価</th><th>金額</th><th>税率</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Web サイト制作サービス</td><td class="num">1</td><td class="num">30,000</td><td class="num">30,000</td><td class="num">10%</td></tr>
+    </tbody>
+    <tfoot>
+      <tr><td colspan="3">10% 対象</td><td class="num">30,000</td><td class="num">消費税 3,000</td></tr>
+    </tfoot>
+  </table>
+</div>
+<!--
+  ここが CDN からの読み込み。type="module" が要る。
+  バージョン（@0.2.1）は必ず固定する。外すと最新版が読み込まれ、更新のたびに挙動が変わりうる。
+-->
+<script type="module">
+  import * as ReceiptHtmlToPdf
+    from 'https://cdn.jsdelivr.net/npm/@hidemikimura/receipt-html-to-pdf@0.2.1/dist/receipt-html-to-pdf.min.js';
+  // type="module" でない普通のスクリプトからも使えるようにグローバルへ載せる
+  window.ReceiptHtmlToPdf = ReceiptHtmlToPdf;
+  const status = document.querySelector('#status');
+  const button = document.querySelector('#save');
+  try {
+    // 上の @font-face と同じファイルを渡す（TrueType の静的 TTF のみ。woff2 / otf は不可）
+    await ReceiptHtmlToPdf.registerFont({
+      family: 'BIZ UDPGothic',
+      weight: 400,
+      src: 'https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/bizudpgothic/BIZUDPGothic-Regular.ttf',
+    });
+    await document.fonts.ready;
+    status.textContent = `準備完了（v${ReceiptHtmlToPdf.version}）`;
+    button.disabled = false;
+  } catch (e) {
+    status.textContent = `フォントの読み込みに失敗しました: ${e.message}`;
+  }
+  button.addEventListener('click', async () => {
+    button.disabled = true;
+    status.textContent = '生成中…';
+    try {
+      const pdf = await ReceiptHtmlToPdf.htmlToPdf(document.querySelector('#receipt'), {
+        page: { size: 'A4', margin: '15mm' },
+        metadata: { title: '領収証' },
+        onWarning: (w) => console.warn(w.code, w.message),
+      });
+      ReceiptHtmlToPdf.downloadPdf(pdf, 'receipt.pdf');
+      status.textContent = '生成しました';
+    } catch (e) {
+      status.textContent = `失敗: ${e.message}`;
+    } finally {
+      button.disabled = false;
+    }
+  });
+</script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hidemikimura/receipt-html-to-pdf",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Receipt html to pdf — ブラウザ内で HTML/CSS をテキスト選択可能なベクター PDF に変換するライブラリ（日本の領収証・適格請求書向け）",
   "license": "MIT",
   "author": "Hidemi Kimura",

package/skills/receipt-html-to-pdf/SKILL.md CHANGED Viewed

@@ -40,6 +40,17 @@ const pdf = await htmlToPdf(document.getElementById('receipt'), {
 downloadPdf(pdf, 'receipt.pdf');
 ```
+npm を使わない場合は CDN の URL をそのまま `import` できる（`dist/` は依存ゼロの単一 ESM）。バージョンは必ず固定する。
+```html
+<script type="module">
+  import { registerFont, htmlToPdf, downloadPdf }
+    from 'https://cdn.jsdelivr.net/npm/@hidemikimura/receipt-html-to-pdf@0.2.1/dist/receipt-html-to-pdf.min.js';
+</script>
+```
+グローバル変数を配るビルド（IIFE / UMD）は無い。`type="module"` でない普通のスクリプトから使いたいときは、`import * as ReceiptHtmlToPdf` して `window` に載せる。モジュールスクリプトは `defer` 相当で後から実行されるので、読み込み完了をイベントで知らせるかボタンを `disabled` にしておくこと。動く一式は `examples/cdn.html`。
 `htmlToPdf` は既定で `Blob` を返す。`output: 'uint8array'` でバイト列、`'dataurl'` で data URL。サーバーへ送るなら `Blob` のまま `FormData` に入れればよい。
 ## フォント: ここが一番詰まる
@@ -118,6 +129,7 @@ footer: '<div style="text-align:center;font-size:8pt">{{pageNumber}} / {{totalPa
 - **Web Components**: シャドウ DOM に対応している。ホスト要素をそのまま渡してよく、`<slot>` の割り当て・`:host` / `::slotted()`・`adoptedStyleSheets`（Lit の `static styles`）・`:defined` はすべて引き継がれる。シャドウルート内の要素（`renderRoot.querySelector()`）を渡した場合も、そのツリーのスタイルは既定の `stylesheets: 'inherit'` で拾われる。
 - ただし **`closed` なシャドウルートは中身が出ない**（外から参照できないため）。`Element.getHTML()` が無い古いブラウザでも同様で、その場合は警告が出る。
 - iframe 側ではカスタム要素はアップグレードされない。`connectedCallback` で DOM を組む要素は、`customElements.whenDefined()` と `document.fonts.ready` を待ってから変換する。
+- **幅は本文領域に合わせる**。A4・余白 15mm なら 180mm ちょうど。固定幅に `padding` / `border` を足すときは `box-sizing: border-box` を付けないと右端が切れる（`other` の警告が出る）。
 - HTML 文字列も渡せる。その場合 `stylesheets` を明示するのが確実。
 - `display: none` の要素は子孫ごと出力されない（場所も取らない）。渡したルート要素自身が `display: none` だと空の PDF になる。`visibility: hidden` は描かれないが場所は残るので、PDF 上は空白になる。
 - **画面に出さずに PDF にだけ載せたい**ときは `display: none` ではなく、画面外へ逃がす（`position: absolute; left: -10000px`）か、`@media print` に書いて `mediaPrint: true` で変換する。
@@ -135,4 +147,5 @@ footer: '<div style="text-align:center;font-size:8pt">{{pageNumber}} / {{totalPa
 - `CFF outlines are not supported` → OTF ではなく静的 TTF を渡す
 - 文字が □ になる → そのフォントにグリフが無い（`missing-glyph` 警告に該当文字が出る）
 - 文字がずれる → `@font-face` と `registerFont` のファイルが違う
+- **右端が切れる** → 内容が本文領域より横に広い（`other` の警告が出る）。A4・余白 15mm なら本文領域は 180mm ちょうど。`width: 180mm` に `padding` / `border` を足すなら `box-sizing: border-box` を付ける
 - 何も描かれない → 要素が `display:none`、または Shadow DOM でスタイルが届いていない

package/skills/receipt-html-to-pdf/references/troubleshooting.md CHANGED Viewed

@@ -23,6 +23,7 @@
 | カスタム要素の中身が出ない（枠だけになる） | `closed` なシャドウルート、または `Element.getHTML()` が無いブラウザ | `mode: 'open'` にする。警告（`unsupported-css`）にブラウザ側の理由が出ている |
 | カスタム要素の中身が古い | `connectedCallback` の描画が終わる前に変換した | `customElements.whenDefined()` と `document.fonts.ready` を待ってから呼ぶ |
 | シャドウ外の CSS が当たらない | 文書のスタイルシートはシャドウツリーに届かない（ブラウザの仕様どおり） | 必要な CSS をシャドウルート内に置くか、`stylesheets` に文字列で渡す |
+| 右端が切れる | 内容が本文領域より横に広い。`other` の警告にはみ出し量が出る（0.2.1 以降） | A4・余白 15mm なら本文領域は 180mm。固定幅 + `padding` / `border` には `box-sizing: border-box` を付ける。縮まない表なら列幅を見直す |
 | 画像が出ない | クロスオリジンで CORS ヘッダーが無い | `crossorigin="anonymous"` と `Access-Control-Allow-Origin` を設定する。`image-failed` 警告が出ている |
 | 影や角丸グラデーションが消える | 未対応 CSS | `onWarning` の `unsupported-css` を見る。ボーダーや単色で代替する |
 | テーブルの罫線が二重になる | `border-collapse: separate` のまま隣接セルに罫線を引いた | `border-collapse: collapse` を使う |

package/src/index.js CHANGED Viewed

@@ -80,7 +80,7 @@ export { expandPrintMediaCss } from './renderer.js';
  */
 /** ライブラリのバージョン（package.json と同期） */
-export const version = '0.2.0';
+export const version = '0.2.1';
 /** モジュール共有のフォントレジストリ */
 const registry = new FontRegistry();

package/src/renderer.js CHANGED Viewed

@@ -50,6 +50,7 @@ export async function renderDocument(input, opts) {
   fit();
   // レイアウトを確定させる
   void doc.body.offsetHeight;
+  warnIfTooWide(doc, opts.widthPx, opts.warn ?? (() => {}));
   return {
     iframe,
@@ -68,7 +69,9 @@ export async function renderDocument(input, opts) {
 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>`;
+  // 親文書の body マージンが PDF に持ち込まれると内容が右へずれて右端が切れるので、
+  // !important で確実に打ち消す（用紙の余白は options.page.margin が受け持つ）。
+  const reset = `<style data-rhtp-reset>html,body{margin:0 !important;padding:0 !important;background:transparent}html{-webkit-text-size-adjust:100%}</style>`;
   if (typeof input === 'string') {
     // 完全な HTML 文書ならそのまま。<head> の直後に base とリセットを差し込む。
@@ -151,6 +154,29 @@ function shadowHostStyles(input, stylesheets, mediaPrint) {
   return parts.map((css) => `<style>${mediaPrint ? expandPrintMediaCss(css) : css}</style>`).join('');
 }
+/**
+ * 内容が本文領域より横に広いと、右側が切れたまま気づかれにくいので警告する。
+ * 固定幅 + `box-sizing: content-box` や、畳めない表が原因になりやすい。
+ *
+ * @param {Document} doc
+ * @param {number} widthPx  本文領域の幅（px）
+ * @param {(w: import('./index.js').ConversionWarning) => void} warn
+ */
+function warnIfTooWide(doc, widthPx, warn) {
+  const width = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
+  const over = width - widthPx;
+  // 1px 未満は丸め誤差とみなす
+  if (over < 1) return;
+  const mm = (/** @type {number} */ px) => Math.round((px / 96) * 25.4 * 10) / 10;
+  warn({
+    code: 'other',
+    message:
+      `Content is ${Math.round(over)}px (${mm(over)}mm) wider than the page content area ` +
+      `(${Math.round(width)}px vs ${Math.round(widthPx)}px); the right side will be clipped. ` +
+      'Common causes: a fixed width plus padding/border without box-sizing: border-box, or a table that cannot shrink.',
+  });
+}
 /** シャドウルートを持てない要素（void 要素）。outerHTML にフォールバックする。 */
 const VOID_TAGS = new Set(['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'LINK', 'META', 'SOURCE', 'TRACK', 'WBR']);

package/types/index.d.ts CHANGED Viewed

@@ -93,7 +93,7 @@ export { expandPrintMediaCss } from "./renderer.js";
  * @typedef {Element|string} ConvertInput
  */
 /** ライブラリのバージョン（package.json と同期） */
-export const version: "0.2.0";
+export const version: "0.2.1";
 /**
  * 登録するフォントの定義。
  * `src` は TrueType アウトライン（glyf）を持つ静的 TTF のみ対応。