![[JS] Retour sur le rendu d’une page avec PDF.js](https://dev.vlec.be/wp-content/themes/overlay/images/blog-img-3-2.png)
[JS] Retour sur le rendu d’une page avec PDF.js
Il y a déjà un moment nous abordions le fait de pouvoir afficher une page de PDF sous forme d’image grâce à la librairie PDF.js. Les différentes mises à jour de celle-ci ont conduit à ce que certains appels soient désormais dépréciés, bien que toujours fonctionnels.
Voici le nouveau code que nous pouvons utiliser :
pdfjsLib.getDocument(
{
data : ao_pdfData
})
.promise.then(function(dPdf)
{
dPdf.getPage(ai_num).then(function(page)
{
var canvas = document.createElement('canvas');
canvas.id = as_id + '-page-' + ai_num;
canvas.className = 'f-canvas';
var vContext = canvas.getContext('2d');
var vViewport = page.getViewport({
scale: af_scale2,
rotation: 0
});
canvas.height = vViewport.height;
canvas.width = vViewport.width;
var renderContext = {
canvasContext: vContext,
viewport: vViewport
};
page.cleanupAfterRender = true;
var renderTask = page.render(
renderContext
);
renderTask.promise.then(function()
{
if (canvas.msToBlob)
{
$('#' + img_id).attr("src",
canvas.toDataURL(
"image/jpeg", 0.85
)
);
}
else
{
canvas.toBlob(function(blob)
{
let img = new Image();
img.onload = function() {
URL.revokeObjectURL(img.src);
};
img.src = URL.createObjectURL(blob);
$('#' + img_id).attr("src",
img.src
);
}, "image/jpg", 0.85);
}
})
});
});Quelques détails concernant ce code :
- On charge toujours le document en passant en paramètre les données qui auront été décodées à l’aide de la méthode atob(). On aura passé le contenu du PDF sous forme de chaine de caractères en Base64.
- Petite différence : on appelle la méthode then() sur un objet “promise”. Même modification pour la tâche de rendu (variable “renderTask”).
- La variable “viewport” est toujours initialisée avec getViewport() mais on passe un objet contenant les paramètres.
- scale : l’échelle permettant de définir le zoom (ex: 1,5)
- rotation : indique la rotation du document (0 = position initiale)
- On définit toujours la hauteur et la largeur du canevas avec les valeurs du viewport.
- On ajoute une petite option qui permet d’indiquer que la page doit être libérée et nettoyée après son rendu.
- Petite nouveauté : l’utilisation de la méthode toBlob() dans les navigateurs qui supportent cela. Notez que si la méthode “msToBlob” existe alors on va plutôt appeler toDataUrl() pour la compatibilité avec IE.
- On peut également déterminer le type de l’image.
- On peut aussi indiquer la compression (ex : 0.85, 1 étant la qualité la plus élevée).
Grâce à ces modifications vous n’obtiendrez plus de message dans la console indiquant du code deprecated.
N’hésitez pas à partager votre expérience ou à suggérer des améliorations pour ce code !
