Aller au contenu

Premiers pas

GitHub

Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :

Fenêtre de terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Utilisez ensuite le prompt suivant :

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-printer` plugin in my project.

Si vous préférez la configuration manuelle, installez le plugin avec les commandes suivantes, puis suivez les instructions spécifiques à chaque plateforme ci-dessous :

Fenêtre de terminal
bun add @capgo/capacitor-printer
bunx cap sync
import { Printer } from '@capgo/capacitor-printer';

Imprimez un PDF déjà présent sur le disque (recommandé pour les fichiers volumineux).

import { Printer } from '@capgo/capacitor-printer';
await Printer.printFile({
path: 'file:///data/user/0/.../invoice.pdf',
name: 'Invoice #1042',
});
await Printer.printHtml({
html: '<h1>Thank you</h1><p>Total: $42.00</p>',
name: 'Receipt',
});

printBase64 décode l'intégralité des fichiers en mémoire. Pour les assets au-delà d'environ 5 Mo, écrivez dans un fichier temporaire et appelez printFile à la place.

  • Mémoire: large base64 strings can crash the app on low RAM devices.
  • Web: l'impression utilise la boîte de dialogue du navigateur, la mise en page diffère des contrôleurs d'impression natifs.
  • Chemins : sur Android, passez une file:// URI, chemin de fichier absolu, ou content:// URI. Les chemins relatifs à l'application ne sont pas résolus automatiquement.

Affiche l'interface d'impression pour imprimer des fichiers encodés en chaînes base64.

Comportement par plateforme :

  • iOS: Utilise UIPrintInteractionController avec des données décodées en base64
  • Android: Utilise PrintManager avec des données décodées en base64
  • Web: Crée un blob à partir de données base64 et ouvre la boîte de dialogue d'impression

Avertissement de performance : Les fichiers volumineux peuvent provoquer des crashs de l'application en raison des contraintes de mémoire lors du décodage base64. Pour les fichiers de plus de 5 Mo, il est recommandé d'utiliser printFile().

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',
});

Presents the printing UI to print device files.

Comportement par plateforme :

  • iOS: Utilise UIPrintInteractionController avec une URL de fichier. Prend en charge les chemins file:// ou les chemins relatifs au répertoire documents de l'app.
  • Android: Utilise PrintManager avec un chemin de fichier. Prend en charge les URI content:// et les chemins file://.
  • Web: Reads file and opens print dialog

Types de fichiers supportés :

  • Documents PDF (application/pdf)
  • Images : 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',
});

Affiche l'interface d'impression pour imprimer des documents HTML.

Comportement par plateforme :

  • iOS: Rendu du HTML dans WKWebView, puis impression via UIPrintInteractionController
  • Android: Rendu du HTML dans WebView, puis impression via PrintManager
  • WebCrée un iframe avec du contenu HTML et déclenche la boîte de dialogue d'impression

Prérequis HTML :

  • Doit être un document HTML complet avec une structure correcte
  • Peut inclure des styles CSS inline ou des balises style
  • Les ressources externes (images, feuilles de style) doivent utiliser des URL absolues
  • Le CSS spécifique à l'impression peut être ajouté via
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>

Affiche l’interface d’impression pour les documents PDF.

Comportement par plateforme :

  • iOS: Utilise UIPrintInteractionController avec l’URL du fichier PDF
  • Android: Utilise PrintManager avec PdfDocument
  • Web: Creates object URL and opens print dialog

Contraintes de chemin de fichier :

  • iOS: Doit être un chemin file:// ou relatif au répertoire Documents de l’app
  • Android: Prend en charge les URI content:// (téléchargements, MediaStore) ou les chemins file://
  • Web: Doit être un chemin de fichier accessible
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',
});

Affiche l'interface d'impression pour imprimer le contenu de la web view.

Imprime le contenu actuel affiché dans la web view de votre application.

Comportement par plateforme :

  • iOS: Utilise UIPrintInteractionController avec la vue imprimable de WKWebView
  • Android: Utilise WebView.createPrintDocumentAdapter() avec PrintManager
  • Web: Déclenche window.print() pour la page actuelle

Style d'impression : Prend en charge les media queries CSS print pour la personnalisation. Les styles actuels de la web view seront appliqués, y compris

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:
//

Options pour l'impression de données encodées en 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;
}

Options pour imprimer des fichiers depuis le stockage de l'appareil.

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

Options pour imprimer du contenu 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;
}

Options pour imprimer des documents 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;
}

Options de base pour toutes les opérations d'impression.

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

Cette page est générée à partir du src/definitions.ts. Relancez la synchronisation lorsque l’API public change en amont.

Si vous utilisez Premiers pas pour planifier les opérations du dashboard et de API, connectez-l’à Utiliser @capgo/capacitor-printer pour la capacité native dans Utiliser @capgo/capacitor-printer, Aperçu de API pour les détails d'implémentation dans l'aperçu de API, Introduction pour les détails d'implémentation dans l'Introduction, Clés API pour les détails d'implémentation dans les clés API, et Appareils pour le détail d’implémentation dans Devices.