7

有什么方法可以获取 iframe 中加载的 PDF 内容的实际高度？

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

this.contentWindow.document.body.scrollHeight

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

谢谢

彼得

4

5 回答 5

6

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

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);
  });
});
于 2013-09-04T08:08:00.833 回答
2

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

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

即使您通过将 PDF 指定为 an 的源来直接调用 PDF，iframe您也会看到 iframe 具有与任何其他页面一样的 DOM 布局，无论如何都带有pdf的objector 。embedbody

此 PDF '元素' 内是所有相应 PDF 插件的领域，无法通过javascript. 可能有一些flash,java或浏览器插件可以让你与之交互，但我还没有听说过。

于 2013-09-03T23:21:28.650 回答
2

彼得，您无法在 iOS Safari 上的 iFrame 中获得 PDF 的高度，因为没有可用于苹果移动设备的 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-04T09:06:56.343 回答
0

pdf 查看器选项是否view=fit适用于您要完成的工作（为 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-if​​rame-on-the-ipad-problem/和iScroll4可能值得一看。

于 2013-09-03T20:37:15.203 回答
-2

这可以通过使用 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-03T22:11:27.517 回答