Getting Started
Kopieren Sie einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin.
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.
Installieren
Abschnitt mit dem Titel „Installieren“Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo Fähigkeiten Ihrem AI-Tool mit folgender Befehl hinzu:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsVerwenden Sie dann die folgende Anfrage:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-printer` plugin in my project.Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die untenstehenden plattform-spezifischen Anweisungen befolgen:
bun add @capgo/capacitor-printerbunx cap syncImportieren
Abschnitt mit dem Titel „Importieren“import { Printer } from '@capgo/capacitor-printer';API-Übersicht
Abschnitt mit dem Titel “API Übersicht”printBase64
Abschnitt mit dem Titel “printBase64”Stellt die Druck-UI zum Drucken von Dateien in base64-codierten Zeichenfolgen vor.
Plattformverhalten:
- iOS: Verwendet UIPrintInteractionController mit base64-decodierten Daten
- Android: Verwendet PrintManager mit base64-decodierten Daten
- Web: Erstellt ein Blob aus base64-Daten und öffnet das Druckdialog
Leistungshinweis: Große Dateien können zu App-Crashes aufgrund von Speicherkonflikten führen, wenn base64-decodiert wird. Für Dateien größer als 5 MB wird empfohlen, printFile() zu verwenden.
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
Abschnitt mit dem Titel „printFile“Präsentiert die Druck-UI, um Dateien auf Druckgeräten auszudrucken.
Plattformverhalten:
- iOS: Verwendet UIPrintInteractionController mit Datei-URL. Unterstützt Dateien mit dem Pfad file:// oder Pfaden relativ zum Dokumenten-Verzeichnis der App.
- Android: Verwendet PrintManager mit Dateipfad. Unterstützt sowohl content://-URIs als auch Dateien mit dem Pfad file://.
- Web: Liest Datei und öffnet Druckdialog
Unterstützte Dateitypen:
- PDF-Dokumente (Anwendung/ PDF)
- Bilder: 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
Abschnitt mit dem Titel „printHtml”Stellt die Druckoberfläche für HTML-Dokumente bereit.
Verhalten der Plattform:
- iOS: Rendert HTML in WKWebView, dann druckt mit UIPrintInteractionController
- Android: Rendert HTML in WebView, dann druckt mit PrintManager
- Web: Erstellt ein iframe mit HTML-Inhalt und löst das Druckdialog auf
HTML-Anforderungen:
- Sollte ein vollständiges HTML-Dokument mit korrekter Struktur sein
- Kann inline CSS-Stile oder Style-Tags enthalten
- Außenliegende Ressourcen (Bilder, Stylesheets) sollten absolute URLs verwenden
- Printspezifische CSS können mit verwendet werden
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>Stellt die Druck-UI zum Drucken von PDF-Dokumenten vor.
Plattformverhalten:
- iOS: Verwendet UIPrintInteractionController mit PDF-Datei-URL
- Android: Verwendet PrintManager mit PdfDocument
- WebErstellt einen Objekt-URL und öffnet das Druckdialogfeld
Dateipfadauflagen:
- iOSMuss eine Dateipfadauflage im Format file:// oder relativ zur Anwendungs-Dokumentenordner sein
- AndroidUnterstützt Inhalte-URIs (aus Downloads, Medien-Store) oder Dateipfadauflagen
- WebMuss eine zugängliche Dateipfadauflage sein
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
Abschnitt mit dem Titel „printWebView“Stellt das Druck-UI zum Drucken von Inhalten des Web-Views bereit.
Druckt die derzeit angezeigte Inhalte in der Webansicht Ihrer App.
Verhaltensweise der Plattform:
- iOS: Verwendet UIPrintInteractionController mit WKWebView’s sichtbarer Ansicht
- Android: Verwendet WebView.createPrintDocumentAdapter() mit PrintManager
- Web: Auslöst window.print() für die aktuelle Seite
Druckanpassungen: Unterstützt CSS-Druckmedienfragen für die Anpassung. Die aktuellen Styles der Webansicht werden angewendet, einschließlich aller
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://Typenreferenz
Abschnitt mit dem Titel “Typenreferenz”PrintBase64Options
Abschnitt mit dem Titel “PrintBase64Options”Optionen für das Ausdrucken von base64-codierten Daten.
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
Abschnitt mit dem Titel “PrintFileOptions”Optionen für das Ausdrucken von Dateien aus der Gerätespeicherung.
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
Abschnitt mit dem Titel “PrintHtmlOptions”Optionen für das Ausdrucken von HTML-Inhalten.
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
Abschnitt mit dem Titel “PrintPdfOptions”Optionen für das Ausdrucken von PDF-Dokumenten.
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
Abschnitt mit dem Titel „Druckeinstellungen“Grundlegende Einstellungen für alle Druckvorgänge.
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;}Quelle der Wahrheit
Abschnitt mit dem Titel „Quelle der Wahrheit“Diese Seite wurde aus dem Plugin generiert. src/definitions.tsRe-run die Synchronisierung, wenn die öffentliche API upstream geändert wird.
Weitergehen von Getting Started
Abschnitt mit dem Titel „Weitergehen von Getting Started“Wenn Sie Capgo verwenden Getting Started um das Dashboard und API-Operationen zu planen und zu verbinden mit Mit @capgo/capacitor-Drucker Für die native Fähigkeit in Mit @capgo/capacitor-Drucker, API-Übersicht Für die Implementierungsdetails in API-Übersicht, Einführung Für die Implementierungsdetails in Einführung, API-Schlüssel Für die Implementierungsdetails in API-Schlüssel und Geräte Für die Implementierungsdetails in Geräte.