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固定宽度

回答

相关问题