Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. Outils PDF pour Node
  4. Visionneuse PDF JavaScript
OUTILS PDF

Comment visualiser des fichiers PDF en JavaScript

Darrius Serrant
Darrius Serrant
Mis à jour:

Adobe a créé le Format de Document Portable (PDF) pour permettre le partage de documents contenant du texte et des graphiques abondants. Pour ouvrir un fichier PDF en ligne, un programme différent est requis. Les fichiers PDF sont indispensables dans l'environnement actuel pour une publication substantielle. Ils sont fréquemment utilisés dans les affaires 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 plus facile que jamais la création de PDFs. Lorsque vous choisissez la bibliothèque appropriée pour un projet qui génère ses propres fichiers PDF rendus, divers aspects doivent être pris en compte, y compris les capacités de construction, de lecture et de conversion.

2.0 Bibliothèques JavaScript

Considérons, par exemple, le scénario où nous voulons que le client puisse télécharger et visualiser une copie de notre facture. D'autres éléments qui nous importent tout autant sont la mise en page précise, l'impression et le nombre de pages de cette facture. Dans cette section, nous examinerons certaines des bibliothèques les plus populaires pour visualiser des documents PDF.

2.1 HTML2PDF

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

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

  1. Installez localement la bibliothèque JavaScript html2pdf sur votre serveur en utilisant NPM ou ajoutez-la à votre code HTML comme illustré dans l'exemple ci-dessous.
  2. Créez une fonction appelée viewPDF qui sera utilisée pour convertir la section ciblée de la page web en un PDF. Utilisez la fonction getElementById pour sélectionner le segment souhaité.
  3. Avant de la 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.
  4. Incluez un bouton sur votre page HTML qui, lorsqu'il est cliqué, déclenche la fonction viewPDF. Cette fonction générera le PDF et l'ouvrira dans un onglet de navigateur séparé.
<!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() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <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() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>
HTML

Comment Visualiser des Fichiers PDF en JavaScript : Figure 1

2.3 jsPDF

Un logiciel open-source appelé jsPDF crée des fichiers PDF uniquement en utilisant JavaScript. Il génère un objet page en tant que page PDF et le formatte en fonction du formatage fourni. La bibliothèque PDF la plus fréquemment utilisée et bien maintenue sur GitHub s'appelle également jsPDF. Elle fournit des modules faciles à utiliser pour les deux, Node.js et les navigateurs web, car ils sont exportés en conformité avec la norme de module AMD.

En ce qui concerne PDFKit, ses API suivent un modèle impératif, ce qui peut rendre la construction de mises en page complexes difficile. La seule étape supplémentaire nécessaire pour l'intégration des polices avec JavaScript est de 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 puis ouvrons le PDF créé dans un onglet séparé dans un navigateur web.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      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() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>
HTML

2.3 IronPDF

IronPDF pour Node.js simplifie le processus de création et de personnalisation de documents PDF par programmation. Développé par Iron Software, un 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 parfaitement avec les projets Node.js, fournissant aux développeurs des outils puissants pour générer, formater et éditer des PDF avec facilité.

Caractéristiques clés d'IronPDF pour Node.js :

  • Génération versatile de PDF : Avec IronPDF, les développeurs peuvent générer des PDFs à partir de différentes sources, y compris HTML, CSS, JavaScript, images, et d'autres types de fichiers. Cette flexibilité permet de créer des documents PDF dynamiques et attrayants adaptés aux exigences spécifiques.
  • Personnalisation avancée de documents: IronPDF permet aux développeurs d'améliorer les documents PDF avec des fonctionnalités 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.
  • Fonctionnalités de sécurité : IronPDF offre des fonctionnalités de sécurité robustes pour protéger les PDFs 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 des performances optimales, incluant un support complet du multithreading et asynchrone. Cela garantit une génération efficace des PDF, ce qui le rend adapté aux applications critiques pour les performances.
  • Ensemble de Fonctionnalités Complet : Avec plus de 50 fonctionnalités pour créer, formater et éditer des documents PDF, IronPDF offre 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 une large gamme de capacités pour répondre aux besoins des développeurs.

L'exemple de code suivant crée le document PDF en utilisant JavaScript puis visualisé directement depuis l'application :

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // 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 pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();
import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // 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 pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();
JAVASCRIPT

Dans ce code :

  • Nous générons le document PDF (pdf) à partir du contenu HTML.
  • Nous enregistrons le document PDF dans un fichier temporaire (html-with-assets.pdf) en utilisant saveAs.
  • Nous utilisons la fonction open du package open pour ouvrir le fichier PDF en utilisant l'application système par défaut. Cela ouvrira généralement le PDF dans le visualiseur PDF par défaut installé sur le système sinon dans le navigateur par défaut.

Pour plus d'exemples de code sur les tâches liées aux PDF, veuillez visiter cette page Exemples de Code IronPDF Node.js.

Comment Visualiser des Fichiers PDF en JavaScript : Figure 2

La sortie sera générée et affichée comme l'image ci-dessus. Pour en savoir plus sur IronPDF, veuillez consulter le Guide du Visualiseur PDF IronPDF .NET.

3.0 Conclusion

Enfin, il est important de noter que le code JavaScript affiché sur la première page ci-dessus a le potentiel d'être mal utilisé et peut présenter des risques de sécurité lorsqu'il est utilisé par d'autres. Lors de l'incorporation d'un tel code dans une page web ou un site web, il est crucial 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. De plus, les problèmes de compatibilité avec les navigateurs obsolètes et 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 protéger contre les menaces potentielles. Elle 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 en utilisant IronPDF.

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses for purchase. Le package Lite, au prix de $799, comprend une licence permanente, un an de support produit et des options de mise à niveau, sans frais récurrents. Ces licences peuvent être utilisées dans des environnements de développement, de préproduction et de production. Additionally, IronPDF is also available for other languages like C# .NET, Java, and Python. Visitez le site web IronPDF pour plus de détails.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit