スタートガイド
インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-printer`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/printer/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」セクションAIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins次に、以下のプロンプトを使用します:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-printer` plugin in my project.手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:
bun add @capgo/capacitor-printerbunx cap syncインポート
「インポート」セクションimport { Printer } from '@capgo/capacitor-printer';クイックスタート
「クイックスタート」セクションディスク上にすでにあるPDFを印刷する(大容量ファイルに推奨)。
import { Printer } from '@capgo/capacitor-printer';
await Printer.printFile({ path: 'file:///data/user/0/.../invoice.pdf', name: 'Invoice #1042',});例:HTMLレシート
「例:HTMLレシート」というセクションawait Printer.printHtml({ html: '<h1>Thank you</h1><p>Total: $42.00</p>', name: 'Receipt',});例:巨大なbase64ペイロードを避ける
「例:巨大なbase64ペイロードを避ける」というセクションprintBase64 ファイル全体をメモリ内でデコードします。約5 MBを超えるアセットの場合は、一時ファイルに書き込んでから呼び出してください printFile こちらを読んでください。
よくある落とし穴
「よくある落とし穴」セクション- メモリ: メモリの少ないデバイスでは、巨大なbase64文字列によってアプリがクラッシュする可能性があります。
- Web: ブラウザのダイアログを使用して印刷するため、ネイティブのプリントコントローラーとはレイアウトが異なります。
- パス: Androidでは、アクセス可能な
file://URI、絶対ファイルシステムパス、またはcontent://URIを指定してください。アプリ相対パスは自動的には解決されません。
API の概要
「API 概要」セクションprintBase64
「printBase64」セクションbase64文字列としてエンコードされたファイルを印刷するためのUIを表示します。
プラットフォームごとの挙動:
- iOSと: base64デコード済みデータをUIPrintInteractionControllerで使用します
- Android: base64デコード済みデータをPrintManagerで使用します
- Web: base64データからblobを作成し、印刷ダイアログを開きます
パフォーマンス警告: base64のデコード時はメモリ制約により、大きなファイルでアプリがクラッシュする可能性があります。 5MBを超えるファイルでは、代わりにprintFile()の使用を推奨します。
import { Printer } from '@capgo/capacitor-printer';
// Print a base64 encoded PDFawait Printer.printBase64({ name: 'Invoice #12345', data: 'base64-encoded-pdf-data', mimeType: 'application/pdf',});
// Print a base64 encoded imageawait Printer.printBase64({ name: 'Product Photo', data: '/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDA...', mimeType: 'image/jpeg',});printFile
「printFile」セクションデバイス内のファイルを印刷するための印刷UIを表示します。
プラットフォーム別の動作:
- iOSと: UIPrintInteractionControllerをファイルURLで使用します。file://パス、またはアプリのDocumentsディレクトリからの相対パスをサポートしています。
- Android: PrintManagerをファイルパスで使用します。content:// URIとfile://パスの両方をサポートしています。
- Web: ファイルを読み込み、印刷ダイアログを表示します
サポートされているファイル形式:
- PDFドキュメント (application/pdf)
- 画像: JPEG, PNG, GIF, HEIC, HEIF
import { Printer } from '@capgo/capacitor-printer';
// iOS: Print from app documents directoryawait Printer.printFile({ name: 'Contract', path: 'file:///var/mobile/Containers/Data/Application/.../Documents/contract.pdf',});
// Android: Print from content URIawait Printer.printFile({ name: 'Receipt', path: 'content://com.android.providers.downloads.documents/document/123', mimeType: 'application/pdf',});
// Android: Print from file pathawait Printer.printFile({ name: 'Photo', path: 'file:///storage/emulated/0/Download/photo.jpg', mimeType: 'image/jpeg',});printHtml
“printHtml” セクションHTMLドキュメントを印刷するための印刷UIを表示します。
プラットフォーム別の動作:
- iOSと: WKWebViewでHTMLをレンダリングし、UIPrintInteractionControllerを使用して印刷します
- Android: WebViewでHTMLをレンダリングし、PrintManagerを使用して印刷します
- Web: HTMLコンテンツを含むiframeを作成し、印刷ダイアログを表示します
HTMLの要件:
- 適切な構造を持つ完全なHTMLドキュメントであること
- インラインCSSスタイルまたはstyleタグを含めることができます
- 外部リソース(画像、スタイルシート)には絶対URLを使用してください
- 印刷専用のCSSは以下を使用して追加できます
import { Printer } from '@capgo/capacitor-printer';
// Simple HTML documentawait Printer.printHtml({name: 'Sales Report',html: '<html><body><h1>Q4 Sales Report</h1><p>Revenue: $125,000</p></body></html>',});
// HTML with print-specific CSSawait Printer.printHtml({name: 'Styled Invoice',html: `<html><head><style>printPdf
「printPdf」セクションPDFドキュメントを印刷するためのUIを表示します。
プラットフォーム別の動作:
- iOSとiOS: PDFファイルのURLを使用してUIPrintInteractionControllerを使用します
- AndroidAndroid: PdfDocumentを使用してPrintManagerを使用します
- WebWeb: オブジェクトURLを作成し、印刷ダイアログを開きます
ファイルパスの要件:
- iOSと: file:// パス、またはアプリの documents ディレクトリからの相対パスである必要があります
- Android: content:// URI(ダウンロードやメディアストアから)または file:// パスをサポートしています
- Web: アクセス可能なファイルパスである必要があります
import { Printer } from '@capgo/capacitor-printer';
// Print PDF from app storageawait Printer.printPdf({ name: 'Annual Report 2024', path: 'file:///var/mobile/Containers/Data/Application/.../Documents/report.pdf',});
// Print PDF from Android downloadsawait Printer.printPdf({ name: 'Downloaded Document', path: 'content://com.android.providers.downloads.documents/document/123',});printWebView
“printWebView” セクションWeb view のコンテンツを印刷するための印刷 UI を表示します。
アプリの web view に表示されている現在のコンテンツを印刷します。
プラットフォーム別の動作:
- iOSと: UIPrintInteractionController を使用して WKWebView の view printable を実行します
- Android: PrintManager と WebView.createPrintDocumentAdapter() を使用します
- Web: 現在のページの window.print() を実行します
印刷スタイリング: CSSのprintメディアクエリによるカスタマイズに対応しています。Webビューの現在のスタイルが適用されます。
import { Printer } from '@capgo/capacitor-printer';
// Print current web view with default nameawait Printer.printWebView();
// Print with custom job nameawait Printer.printWebView({name: 'Dashboard Screenshot',});
// Use with print-specific CSS in your HTML// Add this to your app's CSS://型リファレンス
「型リファレンス」セクションPrintBase64Options
「PrintBase64Options」セクションBase64エンコードされたデータの印刷オプション
export interface PrintBase64Options extends PrintOptions { /** * Valid base64 encoded string representing the file content. * * The base64 string should NOT include the data URL prefix (e.g., "data:application/pdf;base64,"). * Only provide the raw base64 encoded content. * * **Performance Considerations:** * - Base64 encoding increases data size by approximately 33% * - Large files (>5MB) may cause memory issues when decoding * - Consider using printFile() for large documents * * **Platform Notes:** * - **iOS**: Decoded to NSData and passed to UIPrintInteractionController * - **Android**: Decoded to byte array and written to temporary file * - **Web**: Converted to Blob for printing * * @since 7.0.0 * @example 'base64-encoded-pdf-data' */ data: string;
/** * MIME type of the base64 encoded data. * * **Supported types:** * - `application/pdf` - PDF documents * - `image/jpeg` - JPEG images * - `image/.png` - PNG images * - `image/.gif` - GIF images (iOS/Android only) * - `image/heic` - HEIC images (iOS only) * - `image/heif` - HEIF images (iOS only) * * **Platform Support:** * - All platforms support PDF, JPEG, and PNG * - GIF support varies by platform * - HEIC/HEIF are iOS-specific formats * * @since 7.0.0 * @example 'application/pdf' * @example 'image/jpeg' */ mimeType: string;}PrintFileOptions
PrintFileOptions セクションデバイスストレージ内のファイルを印刷するためのオプション。
export interface PrintFileOptions extends PrintOptions { /** * Path to the file to print. * * **iOS Path Formats:** * - `file://` URL: Full file URL path * - Relative path: Path relative to app's documents directory * - Must be within app's accessible directories (documents, temporary, cache) * * **Android Path Formats:** * - `content://` URI: Content provider URI (recommended for external files) * - `file://` path: Direct file system path * - Must have read permission for the file * * **Common Use Cases:** * - App documents: Files saved in app's document directory * - Downloads: Files from system downloads folder (use content:// on Android) * - Temporary files: Files in app's temporary/cache directory * - Shared storage: Files from external storage (Android, requires permissions) * * @since 7.0.0 * @platform ios Supports file:// paths and relative paths * @platform android Supports content:// URIs and file:// paths * @example 'content://com.android.providers.downloads.documents/document/123' * @example 'file:///var/mobile/Containers/Data/Application/.../Documents/document.pdf' * @example 'file:///storage/emulated/0/Download/receipt.pdf' */ path: string;
/** * MIME type of the file. * * **Platform Behavior:** * - **Android**: REQUIRED for content:// URIs. Helps the system determine how to handle the file. * Optional for file:// paths (auto-detected from extension). * - **iOS**: Ignored. File type is auto-detected from file extension. * - **Web**: Optional. Auto-detected if not provided. * * **Common MIME Types:** * - `application/pdf` - PDF documents * - `image/jpeg` - JPEG images * - `image/.png` - PNG images * - `image/.gif` - GIF images * * @since 7.0.0 * @default Undefined (auto-detected from file extension) * @platform android Used for content:// URIs and file type detection * @platform ios Ignored (auto-detected) * @example 'application/pdf' * @example 'image/jpeg' */ mimeType?: string;}PrintHtmlOptions
PrintHtmlOptions セクションHTMLコンテンツを印刷するためのオプション。
export interface PrintHtmlOptions extends PrintOptions { /** * HTML content to print. * * **Content Requirements:** * - Should be a complete HTML document with `<html>`, `<head>`, and `<body>` tags * - Can include inline CSS styles or `<style>` tags * - External resources (images, fonts) should use absolute URLs * - JavaScript is not executed during print rendering * * **Print Optimization Tips:** * - Use `@media print` CSS rules for print-specific styling * - Control page breaks with `page-break-before`, `page-break-after`, `page-break-inside` * - Hide UI elements using `.no-print { display: none; }` class * - Adjust font sizes for readability (12pt is standard for print) * - Use print-friendly colors (avoid dark backgrounds) * * **Platform Rendering:** * - **iOS**: Rendered in WKWebView before printing * - **Android**: Rendered in WebView before printing * - **Web**: Rendered in hidden iframe before printing * * **Character Encoding:** * - UTF-8 is recommended and default * - Include charset in HTML: `<meta charset="UTF-8">` * * @since 7.0.0 * @example '<html><body><h1>Hello World</h1><p>This is a test document.</p></body></html>' * @example * ```typescript * const htmlWithStyles = ` * <html> * <head> * <meta charset="UTF-8"> * <style> * @media print { * body { font-family: Arial, sans-serif; font-size: 12pt; } * .no-print { display: none; } * h1 { color: #333; page-break-before: always; } * } * </style> * </head> * <body> * <h1>Invoice #12345</h1> * <p>Amount: $299.99</p> * </body> * </html> * `; * ``` */ html: string;}PrintPdfOptions
PrintPdfOptions セクションPDFドキュメントを印刷するためのオプション。
export interface PrintPdfOptions extends PrintOptions { /** * Path to the PDF document. * * **iOS Path Formats:** * - `file://` URL: Full file URL path to PDF document * - Relative path: Path relative to app's documents directory * - Must be within app's accessible directories (documents, temporary, cache) * - PDF must be valid and not password-protected * * **Android Path Formats:** * - `content://` URI: Content provider URI (recommended for external PDFs) * - `file://` path: Direct file system path to PDF * - Must have read permission for the file * - Supports both single-page and multi-page PDFs * * **Web Path Formats:** * - Relative or absolute path accessible from web context * - Must be a valid PDF file * * **Validation:** * - File must exist at the specified path * - File must be a valid PDF (checked by magic number/header) * - File must be readable by the app * * **Common Sources:** * - App documents: PDFs saved in app's document directory * - Downloads: PDFs from system downloads (use content:// on Android) * - Generated PDFs: Temporary PDFs created by the app * - Network downloads: PDFs downloaded and saved locally * * @since 7.0.0 * @platform ios Supports file:// paths and relative paths * @platform android Supports content:// URIs and file:// paths * @platform web Supports accessible file paths * @example 'content://com.android.providers.downloads.documents/document/123' * @example 'file:///var/mobile/Containers/Data/Application/.../Documents/document.pdf' * @example 'file:///storage/emulated/0/Download/report.pdf' * @example 'Documents/invoice-2024.pdf' */ path: string;}PrintOptions
PrintOptions セクションすべての印刷操作における基本オプション。
export interface PrintOptions { /** * Name of the print job. * * **Usage:** * - Displayed in the system print queue * - Shown in print history/logs * - May appear in printer status displays * - Used as default filename for "Save as PDF" option * * **Platform Behavior:** * - **iOS**: Shown in print preview header and activity view * - **Android**: Displayed in print job notification and print queue * - **Web**: Used as document title in print dialog * * **Best Practices:** * - Use descriptive names (e.g., "Invoice #12345", "Q4 Report") * - Keep under 50 characters for better display * - Avoid special characters that may cause issues in filenames * - Include relevant identifiers (order numbers, dates, etc.) * * **Examples:** * - "Invoice #12345" * - "Sales Report - 2024 Q4" * - "Customer Receipt - John Doe" * - "Product Photo - SKU-ABC123" * * @since 7.0.0 * @default 'Document' * @platform ios Shown in print preview and activity view * @platform android Shown in print queue and notifications * @platform web Used as document title in print dialog * @example 'Invoice #12345' * @example 'Annual Report 2024' * @example 'Receipt - Order #789' */ name?: string;}Source of Truth
「Source Of Truth」セクションこのページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。
Getting Startedの続きを進める
「Getting Started からの続き」セクション使用している場合 スタートガイド ダッシュボードと API の運用を計画するには、これを次と連携させます @capgo/capacitor-printer の使用方法 @capgo/capacitor-printer を使用してネイティブ機能を利用する場合、 API の概要 「API の概要」の実装の詳細については、 はじめに 「はじめに」における実装の詳細については、 API キー および「API Keys」の実装の詳細については、 デバイス 実装の詳細については Devices を参照してください。