web-dev-qa-db-fra.com

Échelle PDF.js PDF sur largeur fixe

J'ai une boîte fixe où je veux afficher mes PDF en rendu par PDF.js. Comme la documentation PDF.js n'est pas vraiment accessible (en parcourant leurs fichiers source), je voudrais savoir s'il est possible de mettre à l'échelle un rendu PDF sur une largeur fixe. Lorsque je définis en CSS : canvas { width: 600px; } pour le canevas affichant le PDF, le PDF est étiré et la qualité est mauvaise.

javascriptpdfmozillapdf.js
31
Roger

J'ai mis à jour l'exemple du github Pdf.js http://jsbin.com/pdfjs-prevnext-v2/edit#html,live pour évoluer correctement à une largeur de toile fixe. Voir http://jsfiddle.net/RREv9/ pour mon code.

La ligne importante est

var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

car l'expression canvas.width / page.getViewport(1.0).width nous donne le facteur d'échelle approprié.

Vous devez modifier la largeur de votre canevas non pas avec css mais par l'attribut width du canevas. Voir largeur et hauteur du canevas en HTML5

60
halex

Pour garantir que la mise à l'échelle fonctionne avec toutes les tailles de page (Letter, A4, A5, etc.), vous devez tenir compte du fait que les rapports entre la hauteur et la largeur varient lorsque les tailles de page changent. Par exemple, une taille de page populaire (en pouces) est:

  • Lettre: 8,5 x 11 .. rapport de 0,772
  • A4: 8,27 × 11,7 .. rapport de 0,706
  • A5: 5,83 × 8,27 .. rapport de 0,704

Vous pouvez calculer la mise à l'échelle correcte en considérant à la fois la hauteur et la largeur et en ne mettant à l'échelle que la quantité la plus petite. Cela garantira que tout tient sur votre toile. De plus, si vous changez la largeur ou la hauteur de votre toile, vous ne casserez rien.

var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);
10
buddamus