Pdf.js, le plugin qui vous permet d’intégrer des pdfs dans une page web

Pour l’un de mes projets, je devais pouvoir afficher le rendu d’un pdf directement dans le navigateur dans le but d’avoir une preview d’un document.
J’ai d’abord innocemment pensé à l'intégrer dans une iframe mais les browsers semblent ne plus l’accepter de cette manière.

Après quelques recherches je suis finalement tombé sur pdf.js. Alors précisons tout de suite, celui supporté par Mozilla car vous vous en doutez, avec un nom comme celui-là, vous allez en trouver quelques-uns.

Donc pour vous éviter de chercher: https://github.com/mozilla/pdf.js

Bien que les premières lignes du github parlent d’extension pour navigateur, vous êtes au bon endroit mais effectivement ce n’est pas bien clair.
Heureusement, il y a une page d’exemple qui elle nous interresse réellement: https://mozilla.github.io/pdf.js/examples/

Un exemple perso

Si je devais vous résumer le code, je vous proposerais celui-ci car il a la particularité de prendre en compte la dimension du canvas dans lequel il se trouve.

Code HTML

<canvas id="pdf-canvas"></canvas>

Code JS

// Get the canvas element.
const canvas = document.getElementById('pdf-canvas');

// Get the PDF file path.
let pdfPath = "/folder/pdf/document.pdf";

pdfjsLib.GlobalWorkerOptions.workerSrc = "/library/pdfjs/build/pdf.worker.js";

// Load the PDF file using PDF.js.
pdfjsLib.getDocument(pdfPath).promise.then(function (pdfDoc) {
	// Get the first page of the PDF file.
	pdfDoc
		.getPage(1)
		.then(function (page) {
			const viewport = page.getViewport({ scale: 1 });

			// Set the canvas dimensions to match the PDF page size.
			canvas.width = viewport.width;
			canvas.height = viewport.height;

			// Set the canvas rendering context.
			const ctx = canvas.getContext('2d');

			const renderContext = {
				canvasContext: ctx,
				viewport: viewport,
			};

			// Render the PDF page to the canvas.
			page.render(renderContext);
		})
		.then(function () {
			console.log('Rendering complete');
		});
});

Votre pdf peut désormais s’afficher dans n’importe quelle page.
En bref, un outil à garder sous la main.