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

是否有任何方法可以获得iframe中加载的PDF内容的实际高度

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

this.contentWindow.document.body.scrollHeight

但对于PDF，它并没有返回PDF文档的确切高度吗？有什么办法可以做到吗

谢谢

---

Peter

查看=fitpdf查看器选项是否适用于您试图完成的任务（）：

---

最后-这里的博客文章：可能值得一看。

这可以通过使用JQuery来解决

让我们假设iframe具有如下id

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

你可以得到的高度为

document.body.scrollHeight

---

答案是否定的（不幸的是）

因为在元素级别，如果显示的文档需要，PDF

对象

/

嵌入

不会自动增长以占据更多的高度，因此它们的真实高度永远不会暴露给DOM

即使您通过将PDF指定为

iframe

的源来直接调用它，您也会看到iframe与任何其他页面一样具有DOM布局，在

正文中嵌入PDF的
对象或
嵌入

在这个PDF“元素”中，是所有相应PDF插件的领域，不能通过
javascript
访问。可能有一些
flash
、
java
或浏览器插件可以让你与它进行交互，但我还没有听说过。
我在我的iPad上测试过这个，它可以工作，也许它对你也有好处。
mozilla有一个HTML5 js项目，它呈现并显示pdf文件，您可以在pdf文件中获得页面的视口。


更新2020：pdf.js的API略有变化：

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

    //
    // 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);
  });
});

Peter，你无法在iOS safari上获得iFrame中PDF的高度，因为苹果移动设备上没有adobe reader safari插件。
您可以使用HTML5-Canvas呈现PDF和开源客户端库，如pdfjs…等

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

或

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

在iPad上处理PDF有多种选择。
viewFit
标志用于显示插件应如何缩放PDF，在这种情况下，我们告诉它根据视图宽度或高度调整页面。即使在链接中，接受的答案也会显示一个带有滚动条的iframe！这是怎么被接受的呢？Css高度的
auto
也不起作用，因为插件没有向浏览器传达内容的大小（因此它将“自动”设置为默认值）。如果你设法让它工作编辑。基本上，如果你想提取这个高度，只有窗口应该滚动（而不是pdf）way@Hashbrown考虑到pdf文件无处不在，认为唯一的解决方案是类似iScroll4的东西似乎很愚蠢。pdf文档的确切高度单个pdf页面可能有不同的尺寸。这个，没有什么比文件的高度更高了。它工作得很好！谢谢但这里有一个问题，这个解决方案不是100%的跨浏览器（旧IE我在看你）。因此，还需要添加浏览器检测。但这是iPad的固定问题。实际上@noam有一个解决方案（通常有效）。它需要一点修改，但总体来说是好的。这太棒了，我是喜欢这个问题的人之一，因为我需要一个解决方案。在找不到并解释了原因后，我把这个留在了这里。我认为JS库呈现PDF本身，所以它知道。但与关于
iframe
的问题一致，它没有回答它。好吧，看。我们使用pdf js获取页面计数和页面高度。现在我们可以知道文档高度了。然后我们将该值设置为iframe.style.height，就这样。我知道这不是一个真正的答案，而你的答案实际上是“正确的”。但pdf js是非常好的“黑客”。谢谢你的回答，但pdf js是很好的enouth，因为我们使用pdf js只是为了获得pdf的“高度”，所有渲染都是通过本地iPad pdf显示器进行的。我不知道这对你和那些投票支持你的人来说是如何工作的。。不适用于我，我看不出这个代码如何工作的原因。。
$('#pdf_frame').css('height','auto');

document.body.scrollHeight

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);
  });
});

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

    //
    // 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);
  });
});