PDF.js l'échelle PDF sur une largeur fixe

J'ai un fixe de boîte où je veux afficher mon PDF dans rendues par PDF.js. Comme PDF.js la documentation n'est pas vraiment accessible (en crachant par le biais de leurs fichiers source), je voudrais savoir si c'est possible à l'échelle d'un PDF rendu sur une largeur fixe. Lorsque j'ai mis comme CSS: canvas { width: 600px; } pour la toile de l'affichage du fichier PDF, le PDF s'étend, et la qualité est mauvaise.

InformationsquelleAutor Roger | 2012-10-23
  1. 58

    J'ai mis à jour l'exemple de la Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,en direct à l'échelle correctement fixé la largeur du canevas. Voir http://jsfiddle.net/RREv9/ pour mon code.

    La ligne importante est

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

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

    Vous devez modifier la largeur de votre toile pas avec le css mais par la width attribut de la toile. Voir Toile largeur et la hauteur en HTML5

    • Merci beaucoup, je ne savais pas à propos de la différence entre le CSS largeur et HTML5 propriétés de largeur de l'élément canvas.
    • Donc, si la toile a width: 100% (propriété css), je peux utiliser window.screen.width valeur au lieu de canvas.width droit? Je veux dire, comme var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width); (btw, cela fonctionne bien pour moi)
    • A utiliser canvasContainer.clientWidth puis il a travaillé. Merci!
    • avec cette formule mon pdf a toujours l'air plus petit sur la page et la qualité n'est pas bonne. Voici ce que j'utilise :
    • toile.= largeur de la fenêtre.de l'écran.la largeur; la console.log(fenêtre.de l'écran.la largeur); var viewport = page.getViewport(toile.la largeur de la page.getViewport(0.9).la largeur); de la toile.height = "viewport".la hauteur; de la toile.width = "viewport".largeur de la toile.style.height = "viewport".la hauteur; de la toile.style.width = "viewport".largeur;
    InformationsquelleAutor halex
  2. 10

    Pour s'assurer que la mise à l'échelle fonctionne avec toutes les tailles de page (Lettre, A4, A5, etc.) vous devez prendre en compte que les rapports entre la hauteur et la largeur varient en fonction des tailles de page changer. Par exemple, le populaire tailles de page (en pouces) sont:

    • Lettre: 8,5 x 11.. ratio de 0.772
    • A4: 8.27 × 11.7.. ratio de 0.706
    • A5: 5.83 × 8.27.. ratio de 0.704

    Vous pouvez calculer la bonne mise à l'échelle en considérant à la fois la hauteur et la largeur et la seule mise à l'échelle de la quantité qui est plus petit. Cela permettra de s'assurer que tout s'adapte sur votre toile. En outre, si vous modifiez la largeur ou la hauteur de votre toile, vous de ne rien casser.

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