Insérer un pdf dans une page web : iframe ou embed
Insérer un pdf dans une page web : iframe ou embed
Ma solution : intégrer le pdf avec embed, comme ça :
<embed src="https://url du pdf" width=100% height=1150 type='application/pdf'/>Firefox fait la chasse aux iframes, parce que l'iframe, c'est le MAL absolu, le vecteur potentiel de moult malversations. Et depuis quelques semaines, les pdf intégrés en iframe dans une page web ne s'affichent plus à l'intérieur du site, mais dans le lecteur pdf par défaut de l'ordinateur. Enfin pour moi, quand j'utilise Firefox sur mon Windows 11.
Ma solution : intégrer le pdf avec embed, comme ça :
<embed src="https://url du pdf" width=100% height=1150 type='application/pdf'/>
Si c'est pour afficher un pdf, ça fonctionnera, presque pareil à iframe.
Après, tu peux aussi utiliser la bibliothèque javascript pdf.js qui est plus souple mais nécessitera plus de code. Ici un exemple pour afficher trois pdf :
--> Partie html de ton code :
<!-- Conteneurs pour afficher les PDF -->
<!-- Chaque conteneur a un attribut `data-pdf` contenant l'URL du fichier PDF à afficher -->
<div class="pdf-viewer" data-pdf="mon-fichier1.pdf"></div>
<div class="pdf-viewer" data-pdf="mon-fichier2.pdf"></div>
<div class="pdf-viewer" data-pdf="mon-fichier3.pdf"></div>--> Le code à ajouter dans ta page (partie scripts) pour la gestion des pdf de cette manière :
<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>Au moins, tu ne seras plus embêtée avec les caprices des navigateurs ...
En gros, si tu veux afficher un PDF, tu n'aura qu'à saisir cette ligne (à adapter pour ton ou tes fichiers, une ligne par fichier bien entendu) :
<div class="pdf-viewer" data-pdf="https://exemple.com/mon-fichier1.pdf"></div>Hello,
Si c'est pour afficher un pdf, ça fonctionnera, presque pareil à iframe.
Après, tu peux aussi utiliser la bibliothèque javascript pdf.js qui est plus souple mais nécessitera plus de code. Ici un exemple pour afficher trois pdf :
--> Partie html de ton code :
<!-- Conteneurs pour afficher les PDF -->
<!-- Chaque conteneur a un attribut `data-pdf` contenant l'URL du fichier PDF à afficher -->
<div class="pdf-viewer" data-pdf="mon-fichier1.pdf"></div>
<div class="pdf-viewer" data-pdf="mon-fichier2.pdf"></div>
<div class="pdf-viewer" data-pdf="mon-fichier3.pdf"></div>--> Le code à ajouter dans ta page (partie scripts) pour la gestion des pdf de cette manière :
<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>Au moins, tu ne seras plus embêtée avec les caprices des navigateurs ...
En gros, si tu veux afficher un PDF, tu n'aura qu'à saisir cette ligne (à adapter pour ton ou tes fichiers, une ligne par fichier bien entendu) :
<div class="pdf-viewer" data-pdf="https://exemple.com/mon-fichier1.pdf"></div>
Remarque, quand j'étais au lycée, j'étais trrrès lente en math parce que je refusais d'utiliser les théorèmes : je re-démontrais TOUT. Je veux tout faire toute seule, c'est comme enlever les tites roues quand t'apprends à faire du vélo.
Ralala, Vincent. Ta soluce, elle est pas seulement un rien complexe, elle fait appel à des ressources externes (" Importation de PDF.js depuis un CDN") et moi, je leur fais la chasse. J'ai même été jusqu'à rapatrier dans le site les fonts dites "google" qui sont pour la plupart de licence libre et ne sont utilisées par Google que pour placer des mini-espions sur ton site.
Remarque, quand j'étais au lycée, j'étais trrrès lente en math parce que je refusais d'utiliser les théorèmes : je re-démontrais TOUT. Je veux tout faire toute seule, c'est comme enlever les tites roues quand t'apprends à faire du vélo.
Tu modifies juste l'emplacement du js vers ton arborescence locale (enfin, celle de ton serveur, là où tu as déposé les scripts pdf.js).
Ralalaaaaaa
Le fait de tout avoir en local, c'est bien pour les fonts google (et encore), mais c'est pas bien pour ce type de procédé. Il est plus sécurisant de faire un import distant que local pour la simple raison d'avoir toujours affaire à la dernière version du script.
Si t'es en local, tu peux héberger une faille de sécurité sans le savoir et qui serait déjà corrigée sur le CDN
Sur HomeGED, je mets tout en local, mais ça m'oblige à publier régulièrement des mises à jour pour traiter les failles de sécurité qui auraient été corrigées. Mais HomeGED est une application qui doit fonctionner de manière autonome, d'où ce procédé.
Et alors, qu'est-ce qui t'empêche de rapatrier le js en local ? rien !
Tu modifies juste l'emplacement du js vers ton arborescence locale (enfin, celle de ton serveur, là où tu as déposé les scripts pdf.js).
Ralalaaaaaa
Le fait de tout avoir en local, c'est bien pour les fonts google (et encore), mais c'est pas bien pour ce type de procédé. Il est plus sécurisant de faire un import distant que local pour la simple raison d'avoir toujours affaire à la dernière version du script.
Si t'es en local, tu peux héberger une faille de sécurité sans le savoir et qui serait déjà corrigée sur le CDN
Sur HomeGED, je mets tout en local, mais ça m'oblige à publier régulièrement des mises à jour pour traiter les failles de sécurité qui auraient été corrigées. Mais HomeGED est une application qui doit fonctionner de manière autonome, d'où ce procédé.
1 visiteur(s)
1 visiteur(s)