关于javascript：如何获取iframe中PDF文档加载的高度


How to get height of PDF document load in iframe

有什么办法可以将实际的PDF内容的高度加载到iframe中？

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

1
this.contentWindow.document.body.scrollHeight

但是对于PDF，它没有返回PDF文档的确切高度？ 有什么办法做到这一点？

谢谢

彼得

相关讨论

我在iPad上对其进行了测试，它可以正常工作，也许对您也有好处。
mozilla有一个HTML5 js项目，可呈现pdf文件并显示它们，您可以在pdf文件中获取页面的视口。
https://mozillalabs.com/zh-CN/pdfjs/
https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
  });
});
相关讨论

彼得，由于没有适用于Apple移动设备的Adobe Reader Safari插件，因此无法在iOS Safari的iFrame中获得PDF的高度。
您可以使用HTML 5-Canvas呈现PDF和开放源代码客户端库，例如pdfjs ...等...

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

要么

如果您有任何可以将PDF转换为图像的工具或组件，则只需使用HTML从服务器上以HTML投掷图像，就可以控制获取属性。
我们拥有MS-SSRS来满足我们的报告需求，在iPad上可访问的一小部分应用程序中，我们从MS-SSRS而不是PDF获取图像。我们采用此选项的原因是因为如果页数增加，则客户端框架(如PDF-JS)将消失以在画布上呈现。

您有多种选择来处理iPad上的PDF。

相关讨论

答案是否定的(不幸的是)。

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

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

在此PDF"元素"内是所有相应PDF插件的区域，并且javascript无法访问。可能有些flash，java或浏览器插件将允许您与其进行交互，但我还没有听说过。

相关讨论

view=fit pdf查看器选项是否可用于您要完成的任务(为iframe设置自动高度)：

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

另外，此解决方案在尝试获取高度之前将高度设置为自动(https://stackoverflow.com/a/11864824/1803682)：

1
2
3
4
objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

document.body.scrollHeight

最后-此处的博客文章：http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-if??rame-on-the-ipad-problem/和iScroll4可能值得一看。

相关讨论

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

让我们假设您拥有一个ID为以下的iframe

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

现在，通过使用jQuery，我们可以根据需要在iframe中显示pdf来自动调整iframe的高度。

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

你可以得到高度

1
document.body.scrollHeight

相关讨论