Question

有没有办法在iframe中加载PDF内容的实际高度？

我在iPAD设备中滚动PDF内容时遇到问题？我可以获得正文内容的高度使滚动成功，但仅适用于HTML页面。

this.contentWindow.document.body.scrollHeight

但对于PDF，它没有返回PDF文档的确切高度？有没有办法解决这个问题？

由于

彼得

Answer 1

我在我的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);
  });
});

Answer 2

答案是否（不幸的是）。

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

即使您通过将PDF指定为iframe的来源直接调用PDF，您也会看到iframe具有与任何其他页面一样的DOM布局，其中object或{{1无论如何，embed中的pdf。

在此PDF'元素'中是所有相应PDF插件的区域，body无法访问。可能有一些javascript，flash或浏览器插件可让您与之互动，但我还没有听说过。

Answer 3

彼得，因为没有适用于苹果移动设备的adobe reader safari插件，所以你无法在iOS游戏中获得iFrame中PDF的高度。您可以使用HTML 5-Canvas呈现PDF和开源客户端库，如pdfjs ...等...

如果没有这个唯一的方法你可以从服务器获取高度[或宽度]，使用iTextSharp.dll类型的组件并获取pdf页面的高度/宽度，以后你可以乘以页数，这些都是你可以在服务器端轻松完成。使用检索到的高度/宽度来设置iFrame的样式，然后在iFrame的source属性中提供该PDF。 iFrame将拉伸，你将获得滚动效果。

OR

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

您可以通过各种方式在iPad上处理PDF。

Answer 4

view=fit pdf viewer选项是否适用于您要完成的任务（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可能值得一看。

Answer 5

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

让我们假设你有iframe如下，id

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

现在通过使用JQuery，我们可以将iframe的高度设置为auto，因为您需要在iframe中显示pdf。

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

你可以得到身高

document.body.scrollHeight

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

5 个答案: