web-dev-qa-db-ja.com

PDF.jsスケールPDF固定幅

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

javascriptpdfmozillapdf.js
31
Roger

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のキャンバスの幅と高さ を参照してください

60
halex

スケーリングがすべてのページサイズ（レター、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);
10
buddamus