Insérer un pdf dans une page web : iframe ou embed

<script type="module">

  // Importation de PDF.js depuis un CDN

  import * as pdfjsLib from 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/+esm';



  // Configuration du worker utilisé par PDF.js pour traiter les fichiers PDF

  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/pdf.worker.min.js';



  /**

   * Fonction pour afficher un fichier PDF dans un conteneur donné.

   * @param {string} url - URL du fichier PDF à charger.

   * @param {HTMLElement} container - Élément HTML où afficher le PDF.

   */

  async function displayPDF(url, container) {

    try {

      // Charge le fichier PDF

      const pdf = await pdfjsLib.getDocument(url).promise;



      // Charge la première page du PDF

      const page = await pdf.getPage(1);



      // Définit l'échelle (zoom) pour le rendu de la page

      const scale = 1.5;

      const viewport = page.getViewport({ scale });



      // Crée un canvas HTML pour afficher la page

      const canvas = document.createElement('canvas');

      canvas.width = viewport.width; // Largeur du canvas basée sur le PDF

      canvas.height = viewport.height; // Hauteur du canvas basée sur le PDF



      // Contexte 2D du canvas pour dessiner

      const context = canvas.getContext('2d');



      // Rendu de la page PDF dans le canvas

      await page.render({ canvasContext: context, viewport }).promise;



      // Ajoute le canvas au conteneur HTML fourni

      container.innerHTML = ''; // Nettoyer le contenu existant du conteneur

      container.appendChild(canvas);

    } catch (error) {

      // Gère les erreurs (par exemple, fichier PDF non trouvé ou corrompu)

      console.error('Erreur lors de l’affichage du PDF :', error);

      container.innerHTML = '<p>Impossible de charger le PDF.</p>';

    }

  }



  /**

   * Sélectionne tous les conteneurs avec la classe `.pdf-viewer`

   * et affiche les fichiers PDF spécifiés dans leurs attributs `data-pdf`.

   */

  const pdfViewers = document.querySelectorAll('.pdf-viewer');

  pdfViewers.forEach(container => {

    // On va chercher l'URL du fichier PDF à partir de l'attribut `data-pdf`

    const pdfUrl = container.getAttribute('data-pdf');

   

    // On appelle la fonction pour afficher le PDF

    displayPDF(pdfUrl, container);

  });

</script>