PDF.js固定寬度

規模PDF我有一個固定的盒子，我想通過PDF.js.渲染顯示我的PDF文件由於PDF.js文檔不是真正可訪問的（通過它們的源文件分發），我想知道是否可以按固定寬度縮放呈現的PDF。當我設置爲CSS：canvas { width: 600px; }用於顯示PDF畫布中，PDF被拉長，而且質量得到較差。PDF.js固定寬度

來源

2012-10-23 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屬性。請參閱Canvas width and height in HTML5

來源

2012-10-23 21:02:28 halex

非常感謝，我不知道canvas元素的CSS寬度和HTML5寬度屬性之間的差異。 – Roger

所以，如果有帆布'寬度：100％'（_css property_），我可以使用'window.screen.width'價值，而不是'canvas.width'吧？我的意思是，像'VAR視= page.getViewport（window.screen.width/page.getViewport（1.0）.WIDTH）;'（_btw，這是工作罰款me_） –

只好用'canvasContainer.clientWidth'然後它工作。謝謝！ – lony

要確保縮放對所有頁面大小（Letter，A4，A5等）都有效，您必須考慮到頁面大小更改時高度和寬度之間的比率會發生變化。例如，一個流行的頁面尺寸（以英寸計）是：

函：8.5×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-11 22:27:51 buddamus

PDF.js固定寬度

回答

相關問題