w
ドキュメント コアツール Markdown To Pdf

API リファレンス

このドキュメントでは、Markdown から PDF コンバーターの内部 API と連携の可能性に関する技術的詳細を提供します。

概要

The Markdown to PDF converter is built using modern web technologies and provides a robust API for document processing and PDF generation.

コアテクノロジー

フロントエンドフレームワーク

  • Vue.js 3: Reactive frontend framework
  • TypeScript: Type-safe development
  • Composition API: Modern Vue.js patterns

PDF 生成

  • marked.js: Markdown parsing and rendering

スタイルと UI

  • TailwindCSS: Utility-first CSS framework
  • Lucide Icons: Modern icon library
  • Vue Sonner: Toast notifications

内部 API 構造

Markdown 処理

parseMarkdown(content: string): string

Markdown コンテンツを HTML に変換します。

パラメータ：

  • content (string): Raw Markdown コンテンツ

戻り値：

  • string: Rendered HTML

例：

const html = parseMarkdown("# Hello World\nThis is **bold** text.");
// Returns: '<h1>Hello World</h1>\n<p>This is <strong>bold</strong> text.</p>'

validateMarkdown(content: string): boolean

Markdown コンテンツの潜在的な問題を検証します。

パラメータ：

  • content (string): Markdown コンテンツ to validate

戻り値：

  • boolean: True if content is valid

例：

const isValid = validateMarkdown("# Valid Header\nValid content.");
// Returns: true

PDF 生成

generatePDF(options: PDFOptions): Promise<Blob>

HTML コンテンツから PDF を生成します。

パラメータ：

  • options (PDFOptions): PDF 生成オプション

PDFOptions Interface:

interface PDFOptions {
  content: string; // HTML content
  pageSize: "A4" | "A3" | "Letter" | "Legal";
  orientation: "portrait" | "landscape";
  marginTop: number; // in mm
  marginBottom: number; // in mm
  marginLeft: number; // in mm
  marginRight: number; // in mm
  includeToc: boolean;
  includePageNumbers: boolean;
}

戻り値：

  • Promise<Blob>: Blob として生成された PDF

例：

const options = {
  content: "<h1>Document</h1><p>Content</p>",
  pageSize: "A4",
  orientation: "portrait",
  marginTop: 20,
  marginBottom: 20,
  marginLeft: 20,
  marginRight: 20,
  includeToc: true,
  includePageNumbers: true,
};

const pdfBlob = await generatePDF(options);

downloadPDF(blob: Blob, filename?: string): void

PDF Blob をファイルとしてダウンロードします。

パラメータ：

  • blob (Blob): ダウンロードする PDF Blob
  • filename (string, optional): カスタムファイル名

例：

downloadPDF(pdfBlob, "my-document.pdf");

履歴管理

saveToHistory(record: HistoryRecord): void

変換記録を履歴に保存します。

HistoryRecord Interface:

interface HistoryRecord {
  id: string;
  title: string;
  content: string;
  contentLength: number;
  pdfOptions: PDFOptions;
  timestamp: number;
}

例：

const record = {
  id: Date.now().toString(),
  title: "My Document",
  content: "# My Document\nContent here...",
  contentLength: 25,
  pdfOptions: options,
  timestamp: Date.now(),
};

saveToHistory(record);

loadFromHistory(id: string): HistoryRecord | null

ID で履歴レコードを読み込みます。

パラメータ：

  • id (string): 履歴レコード ID

戻り値：

  • HistoryRecord | null: 履歴レコード、見つからない場合は null

clearHistory(): void

すべての履歴レコードをクリアします。

deleteHistoryRecord(id: string): void

特定の履歴レコードを削除します。

パラメータ：

  • id (string): 削除する履歴レコード ID

コンポーネント API

MarkdownToPDF コンポーネント

Props

interface Props {
  id: string; // コンポーネント ID
  docHref?: string; // ドキュメントリンク
  class?: string; // CSS クラス
}

Events

interface Events {
  "pdf-generated": (blob: Blob) => void;
  "history-saved": (record: HistoryRecord) => void;
  error: (error: Error) => void;
}

Methods

interface Methods {
  generatePDF(): Promise<void>;
  clearContent(): void;
  loadExample(): void;
  downloadPDF(): void;
}

リアクティブデータ

markdownContent: Ref<string>

現在の Markdown コンテンツへのリアクティブ参照。

renderedHtml: Ref<string>

レンダリングされた HTML へのリアクティブ参照。

pdfOptions: Ref<PDFOptions>

PDF 生成オプションへのリアクティブ参照。

isGenerating: Ref<boolean>

PDF 生成ステータスへのリアクティブ参照。

pdfBlob: Ref<Blob | null>

生成された PDF Blob へのリアクティブ参照。

ユーティリティ関数

コンテンツ処理

extractTitle(content: string): string

Markdown コンテンツから最初の見出しをドキュメントタイトルとして抽出します。

パラメータ：

  • content (string): Markdown コンテンツ

戻り値：

  • string: 抽出されたタイトルまたはデフォルトタイトル

例：

const title = extractTitle("# My Document\nContent...");
// Returns: 'My Document'

formatDate(timestamp: number): string

タイムスタンプを読みやすい日付文字列にフォーマットします。

パラメータ：

  • timestamp (number): Unix タイムスタンプ

戻り値：

  • string: フォーマットされた日付文字列

例：

const date = formatDate(Date.now());
// Returns: '2024-01-15 14:30:25'

検証関数

validatePDFOptions(options: PDFOptions): boolean

PDF 生成オプションを検証します。

パラメータ：

  • options (PDFOptions): 検証するオプション

戻り値：

  • boolean: オプションが有効な場合 true

sanitizeContent(content: string): string

XSS 攻撃を防ぐためにコンテンツを消毒します。

パラメータ：

  • content (string): 消毒するコンテンツ

戻り値：

  • string: 消毒されたコンテンツ

エラーハンドリング

エラータイプ

PDFGenerationError

PDF 生成に失敗した場合にスローされます。

class PDFGenerationError extends Error {
  constructor(message: string, cause?: Error) {
    super(message);
    this.name = "PDFGenerationError";
    this.cause = cause;
  }
}

ValidationError

コンテンツ検証に失敗した場合にスローされます。

class ValidationError extends Error {
  constructor(message: string, field?: string) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

エラーハンドリングパターン

try {
  const pdfBlob = await generatePDF(options);
  downloadPDF(pdfBlob);
} catch (error) {
  if (error instanceof PDFGenerationError) {
    console.error("PDF generation failed:", error.message);
    // Handle PDF generation error
  } else if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
    // Handle validation error
  } else {
    console.error("Unexpected error:", error);
    // Handle unexpected error
  }
}

パフォーマンスに関する考慮事項

メモリ管理

  • Blob Cleanup: PDF Blob は自動的にクリーンアップされます
  • DOM Cleanup: 一時的な DOM 要素は削除されます
  • Event Listeners: イベントリスナーは適切にクリーンアップされます

最適化戦略

  • Lazy Loading: リソースは必要な時のみ読み込まれます
  • Debouncing: 過剰な処理を防ぐために入力変更はデバウンスされます
  • Caching: パフォーマンスのためにレンダリングされたコンテンツはキャッシュされます
  • Background Processing: PDF 生成はバックグラウンドで実行されます

ブラウザ互換性

サポートブラウザ

  • Chrome: 80+
  • Firefox: 75+
  • Safari: 13+
  • Edge: 80+

機能検出

// Check for required features
const hasRequiredFeatures = () => {
  return (
    "Blob" in window &&
    "URL" in window &&
    "createObjectURL" in URL &&
    "download" in document.createElement("a")
  );
};

連携例

基本連携

import { generatePDF, downloadPDF } from "@/utils/pdf-generator";

const convertMarkdownToPDF = async (markdownContent, options) => {
  try {
    const html = parseMarkdown(markdownContent);
    const pdfBlob = await generatePDF({ ...options, content: html });
    downloadPDF(pdfBlob, "document.pdf");
  } catch (error) {
    console.error("Conversion failed:", error);
  }
};

履歴付き高度な連携

import { generatePDF, saveToHistory, loadFromHistory } from "@/utils/pdf-generator";

const convertWithHistory = async (content, options) => {
  const record = {
    id: Date.now().toString(),
    title: extractTitle(content),
    content,
    contentLength: content.length,
    pdfOptions: options,
    timestamp: Date.now(),
  };

  const pdfBlob = await generatePDF({ ...options, content });
  saveToHistory(record);

  return pdfBlob;
};

将来の API 拡張

計画された機能

  • Batch Processing: 複数ドキュメントの変換
  • Template System: 事前定義されたフォーマットテンプレート
  • Custom Fonts: カスタムフォント埋め込みのサポート
  • Watermarks: 生成 PDF に透かしを追加
  • Digital Signatures: デジタル署名サポートの追加

API バージョニング

将来の API バージョンは新機能を追加しながら後方互換性を維持します。バージョン情報は API から取得できます。

より多くの例と高度な使用方法については、使用例 ドキュメントを参照してください。

このページは役に立ちましたか？