Zum Hauptinhalt springen
Zurück zu plugins
@capgo/capacitor-drucker
Tutorial
@capgo/capacitor-drucker

Drucker

Capacitor-Plugin für das Ausdrucken von Dokumenten, HTML, PDFs, Bildern und Webansichten

Anleitung

Tutorial zum Drucker

Auf Gerät testen

Laden Sie die Capgo-App herunter, dann scannen Sie die QR-Code code.

Drucker-Plugin-Vorschau-QR code

Mit @capgo/capacitor-drucker

Capacitor-Drucker-Plugin für die Druckausgabe von Dokumenten, HTML, PDFs, Bildern und Webansichten.

Installieren

bun add @capgo/capacitor-printer
bunx cap sync

Was dieses Plugin bereitstellt

  • printBase64 - Präsentiert die Druck-UI, um Dateien als Base64-Strings zu drucken.
  • printFile - Präsentiert die Druck-UI, um Geräte-Dateien zu drucken.
  • printHtml - Präsentiert die Druck-UI, um HTML-Dokumente zu drucken.
  • printPdf - Präsentiert die Druck-UI, um PDF-Dokumente zu drucken.

Beispielhafte Verwendung

printBase64

Präsentiert die Druck-UI, um Dateien als Base64-Strings zu drucken.

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

Presents the printing UI to print device files.

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

Presents the printing UI to print HTML documents.

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

Presents the printing UI to print PDF documents.

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

Fortsetzen Sie mit der Verwendung von @capgo/capacitor-drucker

Wenn Sie die Verwendung von Verwendung von @capgo/capacitor-drucker um native Plugin-Arbeit zu planen, verbinden Sie es mit @capgo/capacitor-drucker zur Implementierungsdetail in @capgo/capacitor-Drucker, Anleitung zum Starten zur Implementierungsdetail in Anleitung zum Starten, Capgo Plugin-Verzeichnis zur Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo, und Plugins hinzufügen oder aktualisieren zur Implementierungsdetail in Plugins hinzufügen oder aktualisieren.