Jusqu’à un passé qui n’est pas si lointain, il n’était pas possible d’afficher un PDF sans installer au préalable le plugin Acrobat Reader. Depuis, les navigateurs ont évolués pour voir apparaitre des Viewer PDF embarqués dans le navigateur. Dernièrement, il est possible grâce aux nouvelles fonctionnalités offertes par le HTML5, de réaliser le sien afin de réaliser une intégration plus poussée au sein d’une interface web. Par exemple dans le cadre d’une gestion documentaire aux format hétérogènes.
PDF. js
Cette bibliothèque n’est autre que le viewer embarqué par Firefox, le navigateur de Mozilla. Ce composant repose sur plusieurs composants HTML5, parmi eux nous ne citerons que les plus courants :
- L’élément HTML Canvas
- L’objet JavaScript FileReader
- L’objet console et la fonction console. log ()
Vous trouverez dans la FAQ le tableau de compatibilité des navigateurs.
Afficher un PDF
Commençons par réaliser un exemple de page HTML minimal nécessaire à l’utilisation de cette bibliothèque.
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Demo</title>
<script type="text/javascript" src="pdf.js"></script>
</head>
<body>
<canvas id="pdf-page" style="border:1px solid #ddd; width:80%; margin-left:10%;"></canvas>
</body>
</html>Pour afficher un PDF, il vous suffit d’utiliser le code suivant.
renderPDF('render.pdf');// URL à personnaliser pour votre propre utilisation
function renderPDF(pdfUrl) {
PDFJS.getDocument(pdfUrl).then(function (pdf) {
pdf.getPage(1).then(function (page) {
var pdfPage = document.getElementById('pdf-page');
renderPDFPage(page, pdfPage);
});
return;
});
}
function renderPDFPage(page, canvas) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}Vous devriez obtenir, en fonction du PDF que vous avez utilisé, cet aperçu.
Afficher une miniature
Pour afficher une miniature de cette image, pour par exemple réaliser un chemin de fer d’un document PDF composé de plus d’images, il suffit de réduire la taille de l’élément canvas en CSS de 80% à 10%.
<canvas id="pdf-page" style="border:1px solid #ddd; width:10%; margin-left:10%;"></canvas>Et l’aperçu sera le suivant.
Conclusion
Il est donc de plus en plus aisé de réaliser des applications riches aux contenus hétérogène sans se reposer uniquement sur une conversion côté serveur. De plus, cette librairie bénéficie de la maturité du projet Firefox.
Sources :
