Passer au contenu
Capgo - Live Updates for Capacitor Apps Capgo

Commencer

  1. Installez le plugin

    Fenêtre de terminal
    npm i @capgo/capacitor-pdf-generator

  2. Plateformes de synchronisation

    Fenêtre de terminal
    npx cap sync

Générer à partir de HTML

Section titled “Générer à partir de HTML”
import { PdfGenerator } from '@capgo/capacitor-pdf-generator';


const receiptHtml = `
  <html>
    <body>
      <h1>Capgo Store</h1>
      <p>Thank you for your purchase.</p>
    </body>
  </html>
`;


const pdf = await PdfGenerator.fromData({
  data: receiptHtml,
  documentSize: 'A4',
  orientation: 'portrait',
  type: 'base64',
  fileName: 'receipt.pdf',
});


if (pdf.type === 'base64') {
  const link = document.createElement('a');
  link.href = `data:application/pdf;base64,${pdf.base64}`;
  link.download = 'receipt.pdf';
  link.click();
}

Capturer une URL distante

Section titled “Capturer une URL distante”
await PdfGenerator.fromURL({
  url: 'https://docs.capgo.app/invoice?id=123',
  orientation: 'landscape',
  documentSize: 'A4',
  type: 'share', // opens the native share dialog
  fileName: 'invoice-123.pdf',
});

Conseils

Section titled “Conseils”
  • Incluez du CSS en ligne dans votre chaîne HTML ou fournissez un baseUrl pour que les actifs relatifs soient résolus correctement.
  • Lorsque vous renvoyez des données base64 sur mobile, déplacez-les vers le système de fichiers (par exemple, Capacitor Filesystem) avant de les partager.
  • l’orientation paysage est idéale pour les tableaux larges, tandis que l’orientation portrait s’adapte à la plupart des documents.
  • Envisagez d’utiliser des polices CSS étendues (par exemple, des polices système) pour un rendu cohérent sur toutes les plateformes.