Zum Hauptinhalt springen
@capgo/capacitor-printer Dateien & Speicher Open Source

Drucker Capacitor Plugin

Capacitor Plugin zum Drucken von Dokumenten, HTML, PDFs, Bildern und Web-Views

Installieren

bun add @capgo/capacitor-printer bunx cap sync
npm, pnpm oder yarn
  • npm install @capgo/capacitor-printer
  • pnpm add @capgo/capacitor-printer
  • yarn add @capgo/capacitor-printer

Anleitung

Printer in Capacitor nutzen

Auf dem Gerät testen

Lade die Capgo App herunter und scanne den QR code.

QR-Code für die code Plugin-Vorschau

@capgo/capacitor-printer verwenden

Capacitor Plugin zum Drucken von Dokumenten, HTML, PDFs, Bildern und WebViews.

Installieren

bun add @capgo/capacitor-printer
bunx cap sync

Was dieses Plugin bereitstellt

  • printBase64 - Zeigt das Druck-UI für Dateien an, die als Base64-Strings kodiert sind.
  • printFile - Zeigt das Druck-UI zum Drucken von Gerätedateien an.
  • printHtml - Zeigt das Druck-UI zum Drucken von HTML-Dokumenten an.
  • printPdf - Zeigt das Druck-UI zum Drucken von PDF-Dokumenten an.

Anwendungsbeispiel

printBase64

Zeigt das Druck-UI zum Drucken von base64-kodierten Dateien an.

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

printFile

Zeigt das Druck-UI zum Drucken von Gerätedateien an.

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

printHtml

Zeigt das Druck-UI zum Drucken von HTML-Dokumenten an.

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>

printPdf

Zeigt das Druck-UI zum Drucken von PDF-Dokumenten an.

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

Vollständige Referenz

Weiter mit der Nutzung von @capgo/capacitor-printer

Wenn du es nutzt @capgo/capacitor-printer verwenden Um die Arbeit an nativen Plugins zu planen, verbinde sie mit @capgo/capacitor-printer für die Implementierungsdetails in @capgo/capacitor-printer, Erste Schritte für die Implementierungsdetails in Erste Schritte, Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, und Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren.

FAQ

Printer Plugin FAQ

Wie installiere ich das Printer Plugin in einer Capacitor App?

Führe &quot;bun add @capgo/capacitor-printer&quot; (oder &quot;npm install @capgo/capacitor-printer&quot;) aus und danach &quot;bunx cap sync&quot;, damit die iOS- und Android-Projekte die nativen code übernehmen. Importiere es in deiner App code aus &quot;@capgo/capacitor-printer&quot;.

Funktioniert @capgo/capacitor-printer mit React, Vue und Angular?

Ja. Printer ist ein Capacitor Package und funktioniert daher mit jedem Web-Framework, das in Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und reinem JavaScript.

Welche Capacitor Version wird von @capgo/capacitor-printer unterstützt?

Capgo Plugins folgen der Major-Version von Capacitor: Nutze die Plugin-Major-Version, die zu deiner Capacitor Major-Version passt (z. B. Plugin v8 bei Capacitor 8). Die Kompatibilitätstabelle im GitHub README listet die gepflegten Versionen auf.

Ist @capgo/capacitor-printer kostenlos und Open Source?

Ja. Der code Quellcode ist auf GitHub unter https://github.com/Cap-go/capacitor-printer/ öffentlich einsehbar und das Package kann kostenlos via npm installiert werden. Bug-Reports und Pull Requests sind willkommen.

Kann ich code mit Printer nutzen, ohne ein App Store Review abzuwarten?

Die Installation oder ein Upgrade des Plugins ändert den nativen code, weshalb ein neuer Store-Build nötig ist. Danach können JavaScript-, HTML- und CSS-Änderungen, die das Plugin aufrufen, sofort per Capgo Live Updates ausgeliefert werden.

Printer-Änderungen ausrollen, ohne auf den App-Review zu warten

Sobald das Plugin in deinem Store-Build ist, bringt Capgo mit Live-Updates deine JavaScript-, HTML- und CSS-Änderungen in Minuten zu den Nutzern.

Starte mit Capgo