import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

OUTILS PDF

Comment afficher des fichiers PDF en JavaScript

Publié juin 13, 2023

Introduction

Adobe a créé le Portable Document Format (PDF (EN ANGLAIS)) pour permettre le partage de documents contenant de nombreux textes et graphiques. Pour ouvrir un fichier PDF en ligne, un autre programme est nécessaire. Les fichiers PDF sont indispensables dans l'environnement actuel pour une publication substantielle. Ils sont fréquemment utilisés dans les entreprises pour produire des documents et des factures. Les développeurs génèrent des fichiers PDF pour répondre aux demandes des clients. Les bibliothèques modernes ont rendu la création de PDF plus facile que jamais. Lors de la sélection de la bibliothèque appropriée pour un projet qui génère ses propres fichiers PDF rendus, plusieurs aspects doivent être pris en compte, notamment les capacités de construction, de lecture et de conversion.

2.0 Bibliothèques JavaScript

Prenons l'exemple d'un scénario dans lequel nous voulons que le client puisse télécharger et consulter une copie de notre facture. D'autres éléments tout aussi importants pour nous sont la précision de la mise en page, de l'impression et du nombre de pages de cette facture. Dans cette section, nous examinerons quelques-unes des bibliothèques les plus populaires pour l'affichage de documents PDF.

2.1 HTML2PDF

HTML2PDF combine les fonctionnalités de jsPDF et de Html2Canvas en un seul module pour transformer les pages web et les modèles en fichiers PDF complets.

Suivez ces étapes pour créer un PDF à partir de votre site web :

Installez la bibliothèque JavaScript html2pdf sur votre serveur localement en utilisant NPM ou ajoutez-la à votre code HTML comme indiqué dans l'exemple ci-dessous.
Créer une fonction appelée generatePDF qui sera utilisée pour convertir la section de la page web ciblée en un PDF. Utilisez la fonction getElementById pour sélectionner le segment souhaité.
Avant de le passer à html2pdf, modifiez les options de formatage en les ajoutant à la variable opt. Cela vous permet de personnaliser divers paramètres pour la production de PDF.
Incluez un bouton sur votre page HTML qui, lorsqu'il est cliqué, déclenche la fonction viewPDF. Cette fonction génère le PDF et l'ouvre dans un autre onglet du navigateur.

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
   function viewpdf() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();
    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })
   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
   function viewpdf() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();
    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })
   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>

HTML

Comment visualiser des fichiers PDF en JavaScript : Figure 1

2.3 jsPDF

Un logiciel libre appelé jsPDF crée des fichiers PDF uniquement à l'aide de JavaScript. Il génère un objet page en tant que page PDF et le met en forme en fonction du formatage fourni. La bibliothèque PDF la plus utilisée et la mieux entretenue sur GitHub est également appelée jsPDF. Il fournit des modules simples à utiliser à la fois pour Node.js et les navigateurs web, car ils sont exportés conformément à la norme de module AMD.

Les API de PDFKit suivent un modèle impératif, ce qui peut compliquer la création de mises en page complexes. La seule étape supplémentaire nécessaire à l'intégration des polices avec JavaScript consiste à convertir les polices en fichiers TTF, ce qui est une procédure simple. Dans l'exemple de code ci-dessous, nous créons un fichier PDF et l'ouvrons ensuite dans un onglet séparé d'un navigateur web. Le résultat ressemblera aux images ci-dessus.

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>

HTML

2.3 IronPDF

IronPDF for Node.js simplifie le processus de création et de personnalisation des documents PDF de manière programmatique. Développé par Iron Software, fournisseur de confiance de bibliothèques de traitement de documents haute performance, IronPDF offre une solution robuste pour la génération de PDF dans les environnements Node.js. Il s'intègre de manière transparente aux projets Node.js, offrant aux développeurs des outils puissants pour générer, formater et éditer des PDF en toute simplicité.

La bibliothèque IronPDF offre un large éventail de fonctionnalités, notamment la possibilité de diviser et de combiner des pages dans des documents PDF nouveaux ou existants, de lire et de modifier des fichiers PDF existants, d'extraire des images de fichiers PDF, d'ajouter du texte, des graphiques, des signets, des filigranes, des en-têtes et des pieds de page à des fichiers PDF, le tout sans avoir besoin d'Acrobat Reader. Des documents PDF peuvent être produits à partir de fichiers CSS et CSS Media. IronPDF permet aux utilisateurs de créer, de télécharger et de mettre à jour des formulaires PDF nouveaux ou préexistants.

Principales caractéristiques d'IronPDF pour Node.js :

Génération polyvalente de PDF : Avec IronPDF, les développeurs peuvent générer des PDF à partir de diverses sources, notamment HTML, CSS, JavaScript, images et autres types de fichiers. Cette souplesse permet de créer des documents PDF dynamiques et visuellement attrayants, adaptés à des besoins spécifiques.
Personnalisation avancée des documents : IronPDF permet aux développeurs d'améliorer les documents PDF grâce à des fonctions telles que les en-têtes, les pieds de page, les pièces jointes, les signatures numériques, les filigranes et les signets. Cela permet de créer des PDF de qualité professionnelle avec un contenu riche et des éléments interactifs.
Fonctions de sécurité : IronPDF offre de solides fonctions de sécurité pour protéger les PDF contre les accès non autorisés. Les développeurs peuvent mettre en œuvre des mesures de sécurité telles que des mots de passe, des signatures numériques, des métadonnées et d'autres paramètres de sécurité pour protéger les informations sensibles contenues dans les documents PDF.
Performance optimisée : IronPDF est conçu pour offrir des performances optimales, avec une prise en charge complète du multithreading et de l'asynchronisme. Cela garantit une génération efficace de PDF, ce qui le rend adapté aux applications critiques où les performances sont primordiales.
Ensemble complet de fonctions : Avec plus de 50 fonctions de création, de formatage et d'édition de documents PDF, IronPDF constitue une solution complète pour toutes les tâches liées aux PDF. De la génération de documents de base à la personnalisation avancée et à la sécurité, IronPDF offre un large éventail de possibilités pour répondre aux besoins des développeurs.
L'exemple de code suivant crée le document PDF à l'aide de JavaScript et l'affiche ensuite directement à partir de l'application :

import {PdfDocument} from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
   // Create a PDF from an HTML string
   const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
   // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await advancedPdf.saveAs(filePath);
    // Open the PDF file using the default system application
    open(filePath);
})();

import {PdfDocument} from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
   // Create a PDF from an HTML string
   const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
   // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await advancedPdf.saveAs(filePath);
    // Open the PDF file using the default system application
    open(filePath);
})();

JAVASCRIPT

Dans ce code :

Nous générons le document PDF (advancedPdf) à partir du contenu HTML avec des actifs.
Nous enregistrons le document PDF dans un fichier temporaire (html-avec-actifs.pdf) en utilisant saveAs.
Nous utilisons la fonction open du paquet open pour ouvrir le fichier PDF à l'aide de l'application système par défaut. En règle générale, le PDF s'ouvre dans le visualiseur de PDF par défaut installé sur le système ou dans le navigateur par défaut.
Pour plus d'exemples de code sur les tâches liées au PDF, veuillez consulter le site suivant exemples de code page.
La sortie sera générée et affichée comme dans l'image ci-dessus. Pour en savoir plus sur IronPDF, veuillez consulter le site suivant ici.

3.0 Conclusion

Enfin, il est important de noter que le code JavaScript affiché sur la première page ci-dessus peut être utilisé à mauvais escient et présenter des risques pour la sécurité lorsqu'il est utilisé par d'autres personnes. Lors de l'intégration d'un tel code dans une page web ou un site web, il est essentiel de prendre en compte les risques d'accès non autorisé et les vulnérabilités en matière de sécurité des données. En outre, les problèmes de compatibilité avec les navigateurs obsolètes et les différents systèmes d'exploitation et navigateurs doivent être pris en compte.

En revanche, la bibliothèque IronPDF Node.js offre des mesures de sécurité renforcées pour se prémunir contre les menaces potentielles. Il ne dépend pas de navigateurs spécifiques et est compatible avec tous les principaux navigateurs. Avec seulement quelques lignes de code, les développeurs peuvent facilement créer et lire des fichiers PDF à l'aide d'IronPDF.

La bibliothèque propose plusieurs options de licence pour répondre aux différents besoins des développeurs, y compris une licence d'utilisation de la bibliothèque essai gratuit pour les développeurs et des licences supplémentaires pour les licences disponibles à l'achat. La formule License Lite, au prix de $749, comprend une licence permanente, un an d'assistance produit et des options de mise à niveau, sans frais récurrents. Ces licences peuvent être utilisées dans des environnements de développement, d'essai et de production. En outre, il est également disponible pour d'autres langues telles que C# .NET, Java et Python. Visitez le site IronPDF pour plus de détails.

< PRÉCÉDENT
Comment créer des fichiers PDF en JavaScript

SUIVANT >
Comment générer un fichier PDF à l'aide de JavaScript