40

PDF.jsによってレンダリングされたPDFを表示したい固定ボックスがあります。PDF.jsのドキュメントには実際にはアクセスできないため（ソースファイルを介して吐き出す）、レンダリングされたPDFを固定幅で拡大縮小できるかどうかを知りたいと思います。CSSとして設定した場合： canvas { width: 600px; }PDFを表示するキャンバスの場合、PDFが引き伸ばされ、品質が低下します。

4

3 に答える 3

72

Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html、liveから例を更新して、固定のキャンバス幅に適切にスケーリングしました。私のコードについては、http：//jsfiddle.net/RREv9/を参照してください。

重要な行は

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

式canvas.width / page.getViewport(1.0).widthが適切なスケーリング係数を与えるからです。

キャンバスの幅は、cssではなくwidth、キャンバスの属性によって変更する必要があります。HTML5のキャンバスの幅と高さを参照してください

于 2012-10-23T21:02:28.787 に答える
16

スケーリングがすべてのページサイズ（レター、A4、A5など）で機能するようにするには、ページサイズが変更されると、高さと幅の比率が変化することを考慮する必要があります。たとえば、一般的なページサイズ（インチ単位）は次のとおりです。

  • レター：8.5 x 11..0.772の比率
  • A4：8.27×11.7..比0.706
  • A5：5.83×8.27..比0.704

高さと幅の両方を考慮し、小さい方の量だけをスケーリングすることで、正しいスケーリングを計算できます。これにより、すべてがキャンバスに収まるようになります。さらに、キャンバスの幅や高さを変更しても、何も壊れることはありません。

var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);
于 2015-11-11T22:27:51.557 に答える
4

バージョン>=2.1以降を使用する場合は、オブジェクトを取得します。つまり、次のようにフォーマットされ getViewport({ scale, rotation, dontFlip })ます。

const viewport = page.getViewport({scale: canvas.width / page.getViewport({scale: 1}).width});

＃10369 [api-minor] PDFPageProxyのgetViewportメソッドを変更して、（ランダムに）順序付けられたパラメーターの束ではなくパラメーターオブジェクトを取得するようにします

https://github.com/mozilla/pdf.js/pull/10369

于 2021-06-15T16:52:56.290 に答える