Il existe plusieurs méthodes en Java pour transformer un PDF (ou une partie seulement) en image côté serveur, afin de renvoyer le résultat au client, pour qu’il ne lui reste plus qu’à l’afficher. La première qui vient à l’esprit est Apache PDFBox.

D’autres comme IcePDF ou JPedal font bien le job aussi, mais sont souvent payantes. De plus, le traitement peut évidemment vite devenir lourd pour le serveur si de nombreuses requêtes sont effectuées par plusieurs utilisateurs.

On peut imaginer laisser le client faire le boulot, en utilisant la librairie pdf.js, qui est sous licence Apache. Elle permet de visualiser des documents PDF dans une page web mais aussi de les transformer en image ce qui nous intéresse ici.

L’idée de l’exemple qui suit est de transformer une page donnée en image. Après ajout du script principal dans l’élément head, on va créer une fonction qui recevra plusieurs paramètres tels que les données du fichier PDF (sous forme de chaine encodée en Base64), le numéro de page à transformer, un ID pour la création du canvas, une valeur pour l’échelle du rendu, et l’identifiant de l’élément img qui recevra le résultat.

PDFJS.getDocument({data : atob(ao_pdfData)})
    .then(function(ao_pdf) 
{
 ao_pdf.getPage(ai_num).then(function(ao_page) 
 {
  var lo_canvas = document.createElement('canvas');
  lo_canvas.id = as_idd + '-page-' + ai_num;
  lo_canvas.className = 'f-canvas';

  var lo_context = lo_canvas.getContext('2d');
  var lo_viewport = ao_page.getViewport(af_scale2);
  lo_canvas.height = lo_viewport.height;
  lo_canvas.width = lo_viewport.width;
  
  var lo_renderContext = {
   canvasContext: lo_context,
   viewport: lo_viewport
  };

  ao_page.render(lo_renderContext).then(function()
  {
   $('#' + as_imageId)
     .attr("src", lo_canvas.toDataURL());
  });
 });
});

La fonction PDFJS.getDocument() reçoit en paramètre les données, décodées par la fonction JavaScript atob().

Une fois le document chargé, on va demander à récupérer la page dont le numéro est passé en paramètre. Une fois que cela est fait on exécute une fonction pour traiter les données de cette fameuse page. On crée un élément canvas temporaire, qu’on pourra stocker – ou pas – dans la page. On récupère aussi le contexte de dessin de ce canvas.

On récupère le viewport en indiquant l’échelle (ex : 1.5f). On définit ensuite la hauteur et la largeur du canvas avec les valeurs du viewport.

On crée ensuite un objet qui contiendra le contexte de dessin et le viewport. Ceux-ci seront passés à la fonction render() qui est une fonction de l’objet page. Lorsque le rendu est terminé, on peut récupérer la source de l’image depuis le canvas, grâce à la fonction toDataURL() de ce dernier.