コンテンツにジャンプ

Getting Started

GitHub

Capgo の 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.

Manual Setup を使用する場合は、以下のコマンドを実行してプラグインをインストールし、以下のプラットフォーム固有の指示に従ってください。

ターミナルウィンドウ
bun add @capgo/capacitor-printer
bunx cap sync
import { Printer } from '@capgo/capacitor-printer';

base64形式の文字列でエンコードされたファイルを印刷するためのUIを表示します。

プラットフォームの動作:

  • iOS: UIPrintInteractionControllerを使用してbase64形式の文字列をデコードしたデータを使用します
  • Android: __CAPGO_KEEP_0__を使用してbase64でデコードされたデータ
  • Web: base64データからblobを作成し、印刷ダイアログを開く

パフォーマンス警告: Large files can lead to app crashes due to memory constraints when decoding base64. For files larger than 5MB, it’s recommended to use printFile() instead.

import { Printer } from '@capgo/capacitor-printer';
// Print a base64 encoded PDF
await Printer.printBase64({
name: 'Invoice #12345',
data: 'base64-encoded-pdf-data',
mimeType: 'application/pdf',
});
// Print a base64 encoded image
await Printer.printBase64({
name: 'Product Photo',
data: '/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDA...',
mimeType: 'image/jpeg',
});

デバイスファイルを印刷するための印刷UIを表示します。

プラットフォームの動作:

  • iOS: UIPrintInteractionControllerを使用してファイルURLを使用します。ファイル://パスまたはアプリのドキュメントディレクトリの相対パスをサポートします。
  • Android: __CAPGO_KEEP_0__ を使用してファイルパスを指定します。content:// URI と file:// パスを両方ともサポートしています。
  • Web: ファイルを読み取り、印刷ダイアログを開きます。

サポートされるファイル形式:

  • PDF ドキュメント (application/pdf)
  • イメージ: JPEG、PNG、GIF、HEIC、HEIF
import { Printer } from '@capgo/capacitor-printer';
// iOS: Print from app documents directory
await Printer.printFile({
name: 'Contract',
path: 'file:///var/mobile/Containers/Data/Application/.../Documents/contract.pdf',
});
// Android: Print from content URI
await Printer.printFile({
name: 'Receipt',
path: 'content://com.android.providers.downloads.documents/document/123',
mimeType: 'application/pdf',
});
// Android: Print from file path
await Printer.printFile({
name: 'Photo',
path: 'file:///storage/emulated/0/Download/photo.jpg',
mimeType: 'image/jpeg',
});

HTML ドキュメントを印刷するための印刷 UI を表示します。

プラットフォームの動作:

  • iOS: WKWebViewでHTMLをレンダリングし、UIPrintInteractionControllerを使用して印刷
  • Android: WebViewでHTMLをレンダリングし、PrintManagerを使用して印刷
  • Web: iframeを作成し、HTMLコンテンツを使用して印刷ダイアログをトリガー

HTMLの要件:

  • 完全なHTMLドキュメントで適切な構造を含める
  • インラインCSSスタイルまたはスタイルタグを含めることができる
  • 絶対URLを使用する必要がある外部リソース(画像、スタイルシート)
  • 印刷用CSSを追加するには
import { Printer } from '@capgo/capacitor-printer';
// Simple HTML document
await Printer.printHtml({
name: 'Sales Report',
html: '<html><body><h1>Q4 Sales Report</h1><p>Revenue: $125,000</p></body></html>',
});
// HTML with print-specific CSS
await Printer.printHtml({
name: 'Styled Invoice',
html: `
<html>
<head>
<style>

__CAPGO_KEEP_0__をPDFドキュメントを印刷するUIを表示します。

__CAPGO_KEEP_0__の動作:

  • __CAPGO_KEEP_1____CAPGO_KEEP_0__は、PDFファイルのURLを使用してUIPrintInteractionControllerを使用します。
  • __CAPGO_KEEP_1____CAPGO_KEEP_0__は、PrintManagerを使用してPdfDocumentを使用します。
  • __CAPGO_KEEP_1____CAPGO_KEEP_0__は、オブジェクトURLを作成し、印刷ダイアログを開きます。

__CAPGO_KEEP_1__

  • __CAPGO_KEEP_0__のファイルパス要件:__CAPGO_KEEP_1__
  • __CAPGO_KEEP_0__は、ファイル://パスまたはアプリのドキュメントディレクトリへの相対パスを使用する必要があります。: __CAPGO_KEEP_0__ URIs (ダウンロード、メディアストアから) または file:// パスをサポートします。
  • Web: アクセス可能なファイルパスを指定する必要があります。
import { Printer } from '@capgo/capacitor-printer';
// Print PDF from app storage
await Printer.printPdf({
name: 'Annual Report 2024',
path: 'file:///var/mobile/Containers/Data/Application/.../Documents/report.pdf',
});
// Print PDF from Android downloads
await Printer.printPdf({
name: 'Downloaded Document',
path: 'content://com.android.providers.downloads.documents/document/123',
});

「web view」コンテンツを印刷するUIを表示します。

現在表示されているアプリの「web view」コンテンツを印刷します。

プラットフォームの動作:

  • iOS: WKWebViewのviewが印刷可能な場合、UIPrintInteractionControllerを使用します。
  • Android: WebView.createPrintDocumentAdapter()を使用して、PrintManagerと組み合わせて印刷します。
  • Web: __CAPGO_KEEP_0__

印刷スタイル: CSS印刷メディアクエリをサポートしてカスタマイズが可能です。ウェブビューの現在のスタイルが適用されます。

import { Printer } from '@capgo/capacitor-printer';
// Print current web view with default name
await Printer.printWebView();
// Print with custom job name
await Printer.printWebView({
name: 'Dashboard Screenshot',
});
// Use with print-specific CSS in your HTML
// Add this to your app's CSS:
//

コピー

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;
}

__CAPGO_KEEP_0__

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;
}

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;
}

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;
}

すべての印刷操作の基本オプション

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;
}

このページはプラグインから生成されています。 src/definitions.tsパブリック API がアップストリームで変更された場合に再度 Sync を実行してください。

Getting Started から続けてください。

Getting Started から続けてください。

Capacitor を使用している場合 Getting Started ダッシュボードと API の作業を計画するには、Capacitor を接続してください。 Capacitor のネイティブ機能を使用するには、@capgo/capacitor-printer を使用してください。 Capacitor のネイティブ機能を使用するには、@capgo/capacitor-printer を使用してください。 API の概要 API の実装詳細 導入 Introductionの実装詳細については API キー 実装詳細についてはAPI キー、 デバイス 実装詳細についてはデバイス。