如何获得PDF文档在iframe中的加载高度

有没有什么方法可以获得iframe中加载的PDF内容的实际高度？如何获得PDF文档在iframe中的加载高度

我面临着在iPAD设备中滚动PDF内容的问题？我可以获得身体内容的高度，使滚动成功，但只适用于HTML页面。

this.contentWindow.document.body.scrollHeight

但对于PDF的不返回PDF文档的确切高度？有什么办法可以解决这个问题吗？

感谢

彼得

来源

2013-02-21 peterkr

* PDF文档的确切高度*单个PDF页面可能有不同的尺寸。这，没有什么像文件的高度。 – mkl 2013-09-04 05:38:24

是否为view=fit PDF浏览器选项的工作是什么，你要完成（Set auto height for iframe）：

<iframe src="Path/MyPDF.pdf#view=fit"></iframe>

而且该解决方案试图之前设置高度为自动身高（https://stackoverflow.com/a/11864824/1803682）：

objIframe = document.getElementById('theIframeId');  
objIframe.style.height = 'auto'; 

document.body.scrollHeight

终于 - 博客文章在这里：http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/和iScroll4可能值得一看。

来源

2013-09-03 20:37:15 Matthew

'viewFit'标志是插件应该如何放大PDF，在这种情况下，我们告诉它适合页面视图的宽度或高度。即使在链接中，接受的答案也会显示带有滚动条的iframe！那如何被接受？ 'auto'的Css高度将不起作用，因为插件没有传递内容到浏览器的大小（因此无论如何都会“自动”到*默认值）。如果你设法让它工作，请编辑[this fiddle]（http://jsfiddle.net/QmLv5/2/）。基本上，只有窗口应该滚动（不是PDF），如果你想以这种方式提取高度 – Hashbrown 2013-09-04 00:45:05

@Hashbrown似乎愚蠢认为唯一的解决方案就像iScroll4给出如何无处不在的PDF文件。 – Matthew 2013-09-04 02:00:15

-1

这可以通过使用JQuery来解决。

让我们假设你拥有的iframe作为一个id

<iframe src="name.pdf" id="pdf_frame"></iframe>

通过使用jQuery，我们可以使iframe和汽车的高度，因为你需要显示的iframe里面的PDF现在如下。

$('#pdf_frame').css('height','auto');

你可以得到高度

document.body.scrollHeight

来源

2013-09-03 22:11:27

我不知道这是如何工作给你和那些upvoted你..不为我工作，我看不到原因这个代码将如何工作.. – 2014-10-30 08:46:53

答案是没有（不幸）。

因为在元素级别，PDF object/embed如果显示的文档需要它，它不会自动增长以占据更高的高度，因此它们的真正高度不会暴露给DOM。

即使你直接将它指定为iframe你会看到的iframe有一个DOM布局就像任何其他页面的源代码，与object或body的PDF embed反正叫PDF。

这PDF内容'元素'是所有相应的PDF插件的领土，不能通过javascript访问。可能有一些flash,java或浏览器插件，可以让你与它互动，但我没有听说过它。

来源

2013-09-03 23:21:28 Hashbrown

其实有一个解决方案（通常工作）通过@诺姆。这需要一点修改，但总的来说它很好。 – 2013-09-04 10:24:03

这真棒，我是赞成这个问题的人之一，因为我需要一个解决方案。从未找到一个，并推理为什么，我把它留在这里。我认为JS库会呈现PDF本身，这就是它的知识。但与保持“iframe”的问题一致，它不会回答它。 – Hashbrown 2013-09-04 11:14:15

好吧。我们使用pdf-js来获取pageCount和pageHeight。现在我们可以知道文档高度。然后我们将该值设置为iframe.style.height，就是这样。我知道这不是一个真正的答案，而你的回答实际上是“正确的”答案。但pdf-js是相当不错的'黑客'。 – 2013-09-04 11:19:18

我在我的iPad上测试过它，它可以工作，也许它可能对你也很好。 mozilla有一个HTML5 js项目，用于渲染pdf文件并显示它们，您可以在pdf文件中获取页面的视口。 https://mozillalabs.com/en-US/pdfjs/ https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js

PDFJS.getDocument('helloworld.pdf').then(function(pdf) { 
    // Using promise to fetch the page 
    pdf.getPage(1).then(function(page) { 
    var scale = 1.5; 
    var viewport = page.getViewport(scale); 

    // 
    // Prepare canvas using PDF page dimensions 
    // 
    var canvas = document.getElementById('the-canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

    // 
    // Render PDF page into canvas context 
    // 
    var renderContext = { 
     canvasContext: context, 
     viewport: viewport 
    }; 
    page.render(renderContext); 
    }); 
});

来源

2013-09-04 08:08:00 noamtcohen

它的工作原理！谢谢。但这里有一个问题，这个解决方案不是100％的跨浏览器（我正在看你的旧IE浏览器）。所以还需要添加浏览器检测。但这对iPad来说是个固定的问题。 – 2013-09-04 10:22:37

彼得，也没有办法，你可以得到PDF中的iFrame iOS上的Safari浏览器的高度，没有可用于苹果的移动设备没有Adobe Reader的Safari浏览器插件。您可以使用HTML 5-Canvas来呈现PDF和开源客户端库，如pdfjs等...

没有这种方式可以从服务器获取高度[或宽度]，请使用iTextSharp。 dll类的组件，并获得PDF页面的高度/宽度，稍后您可以乘以页数，这些都可以在服务器端轻松完成。使用检索的高度/宽度来设置iFrame的样式，然后在iFrame的源属性处提供该PDF。 iFrame将伸展，您将获得滚动效果。

如果您有任何工具或组件，可以将PDF转换为图像，那么你只是在HTML扔从服务器映像，使用javascript可以对获得的属性控制。对于我们的报告需求，我们有MS-SSRS，对于可在iPad上访问的应用程序的一小部分，我们从MS-SSRS而不是PDF获取图像。我们采用这个选项的原因是因为如果页面数量增加，像PDF-JS这样的客户端框架将会死亡以在画布上呈现。

你有各种选择来处理iPad上的PDF。

来源

2013-09-04 09:06:56 Hi10

感谢您的回答，但pdf-js不错，因为我们只使用pdf-js来获得pdf的“高度”，所有渲染都是通过本机iPad pdf显示器进行的。 – 2013-09-04 10:29:01

如何获得PDF文档在iframe中的加载高度

回答

相关问题