Passer à la navigation principale
@capgo/capacitor-imprimante Dossiers & Stockage Source ouvert

Imprimante plugin Capacitor

Capacitor plugin pour l'impression de documents, de HTML, de PDF, d'images et de vues web

Installer

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

Guide

Comment utiliser l'imprimante dans Capacitor

Tester sur appareil

Télécharger l'application Capgo, puis scannez le code QR code.

Lien QR de prévisualisation du plugin d'imprimante code

Utilisation de @capgo/capacitor-imprimante

Plugin Capacitor pour l'impression de documents, de HTML, de PDF, d'images et de vues web.

Installer

bun add @capgo/capacitor-printer
bunx cap sync

Ce que ce plugin expose

  • printBase64 - Présente l'interface d'impression pour imprimer des fichiers codés sous forme de chaînes base64.
  • printFile - Presents the printing UI to print device files.
  • printHtml - Présente l'interface d'impression pour imprimer des documents HTML.
  • printPdf - Présente l'interface d'impression pour imprimer des documents PDF.

Exemple d'utilisation

printBase64

- Présente l'interface d'impression pour imprimer des fichiers encodés en chaînes de base64.

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

- Présente l'interface d'impression pour imprimer des documents HTML.

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

- Présente l'interface d'impression pour imprimer des documents PDF.

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

Référence complète

Continuez à partir de l'utilisation de @capgo/capacitor-imprimante

Si vous utilisez En utilisant @capgo/capacitor-imprimante pour planifier le travail de plugin natif, la connecter avec @capgo/capacitor-imprimante pour les détails d'implémentation dans @capgo/capacitor-imprimante, Prise en main pour les détails d'implémentation dans Prise en main, Répertoire de plugin Capgo pour le flux de travail du produit dans Répertoire de plugin Capgo, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, et Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Ajouter ou mettre à jour des plugins.

FAQ

Questions fréquentes sur l'imprimante

Comment puis-je installer le plugin d'imprimante dans une application Capacitor ?

Exécutez « bun add @capgo/capacitor-imprimante » (ou « npm install @capgo/capacitor-imprimante »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte les natives code. Importez-l’à partir de « @capgo/capacitor-imprimante » dans votre application code.

Fonctionne-t-il @capgo/capacitor-imprimante avec React, Vue et Angular ?

Oui. L'imprimante est un paquet Capacitor, elle fonctionne donc avec tout framework web qui tourne à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript pur.

Quelle version de Capacitor est prise en charge par @capgo/capacitor-imprimante ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à votre version majeure de Capacitor (par exemple, plugin v8 avec Capacitor 8). La table de compatibilité dans le README du GitHub liste les versions maintenues.

Est-ce que @capgo/capacitor-imprimante est gratuite et open source ?

Oui. Le code source code est public sur GitHub à https://github.com/Cap-go/capacitor-imprimante/ et le paquet est gratuit pour l'installer depuis npm. Les rapports de bogues et les demandes de modification sont les bienvenus.

Puis-je mettre à jour code qui utilise l'imprimante sans passer par une revue de l'App Store ?

L'installation ou la mise à niveau du plugin change la code native, elle nécessite donc une nouvelle construction de l'application. Une fois cela fait, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être envoyées instantanément avec les mises à jour Capgo.

Ship Printer changes without waiting for app review

Une fois le plugin est dans votre magasin de construction, les mises à jour en direct Capgo envoient vos modifications de JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo