javascript 如何在 iframe 中获取 PDF 文档加载的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15004555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get height of PDF document load in iframe
提问by peterkr
Is there any way to get actual Height of PDF content loaded in iframe?
有没有办法获得 iframe 中加载的 PDF 内容的实际高度？
I am facing an issue to scroll PDF content in iPAD device? I can get the height of body content make scroll successfully, but only for HTML pages.
我在 iPAD 设备中滚动 PDF 内容时遇到问题？我可以获得正文内容的高度使滚动成功，但仅适用于 HTML 页面。
this.contentWindow.document.body.scrollHeight
but for PDF its not returning exact height of the PDF document? Is there any way to get for that?
但是对于PDF它没有返回PDF文档的确切高度？有什么办法可以得到吗？
Thanks
谢谢
Peter
彼得
回答by noamtcohen
I Tested this on my iPad and it works, maybe it could be good for you too. There is an HTML5 js project by mozilla that renders pdf file and displays them and you can get the viewport of a page in the pdf file. https://mozillalabs.com/en-US/pdfjs/https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js
我在我的 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);
});
});
回答by Hi10
Peter, there is no way you can get height of PDF in iFrame on iOS safari as there is no adobe reader safari plugin available for apple mobile devices. You can use HTML 5-Canvas to render PDF and open source client side libraries like pdfjs...etc...
彼得，您无法在 iOS Safari 上的 iFrame 中获得 PDF 的高度，因为没有适用于苹果移动设备的 adobe reader safari 插件。您可以使用 HTML 5-Canvas 来呈现 PDF 和开源客户端库，如 pdfjs...等...
Without that the only way you can get height[or width] is from server, use iTextSharp.dll kind of component and get the height/width of pdf page, which later you can multiply by number of pages, these all you can do easily on server side. Use the retrieved height/width to style your iFrame and then provide that PDF at source attribute of iFrame. iFrame will stretch and you will get scrolling effect.
没有那个，你可以从服务器获取高度[或宽度]的唯一方法是使用iTextSharp.dll类型的组件并获取pdf页面的高度/宽度，稍后你可以乘以页数，这些你都可以轻松完成在服务器端。使用检索到的高度/宽度来设置 iFrame 的样式，然后在 iFrame 的源属性中提供该 PDF。iFrame 会拉伸，你会得到滚动效果。
OR
或者
If you have any tool or component which can convert PDF to image then you just throw images from server on HTML, with javascript you can have control on getting attributes. We have MS-SSRS for our reporting need, for small part of application which is accessible on iPad we get images from MS-SSRS instead of PDF. The reason we adopted this option is because if number of pages increases then the client side framework like PDF-JS will die to render on canvas.
如果您有任何可以将 PDF 转换为图像的工具或组件，那么您只需将图像从服务器扔到 HTML 上，使用 javascript 您可以控制获取属性。我们有 MS-SSRS 来满足我们的报告需求，对于可在 iPad 上访问的一小部分应用程序，我们从 MS-SSRS 而不是 PDF 获取图像。我们采用此选项的原因是，如果页面数量增加，那么像 PDF-JS 这样的客户端框架将无法在画布上呈现。
You have various options with you to handle PDF on iPad.
您有多种选择可以在 iPad 上处理 PDF。
回答by Hashbrown
The answer is no(unfortunately).
答案是否定的（不幸的是）。
Because at the element level, PDF object/embeds don't auto grow to take up more height if the document shown needs it, so their true height is never exposed to the DOM.
因为在元素级别，如果显示的文档需要，PDF object/ embeds 不会自动增长以占据更多高度，因此它们的真实高度永远不会暴露给 DOM。
Even if you call a PDF directly by specifying it as the source of an iframeyou'll see that the iframe has a DOM layout like any other page, with an objector embedof the pdf in the bodyanyway.
即使您通过将 PDF 指定为的源直接调用 PDF，iframe您也会看到 iframe 与任何其他页面一样具有 DOM 布局，无论如何都带有pdf的object或。embedbody
Inside this PDF 'element' is all the respective PDF plugin's territory, and cannot be accessed by javascript. There may be some flash, javaor browser plugin that will allow you to interact with it but I haven't heard of it.
在这个 PDF“元素”中是所有相应的 PDF 插件的领域，不能被javascript. 可能有一些flash,java或浏览器插件可以让您与之交互，但我还没有听说过。
回答by Matthew
Does the view=fitpdf viewer option work for what you are trying to accomplish (Set auto height for iframe):
view=fitpdf 查看器选项是否适用于您要完成的任务（为 iframe 设置自动高度）：
<iframe src="Path/MyPDF.pdf#view=fit"></iframe>
Also this solution setting the height to auto before trying to get the height (https://stackoverflow.com/a/11864824/1803682):
此解决方案也在尝试获取高度之前将高度设置为自动（https://stackoverflow.com/a/11864824/1803682）：
objIframe = document.getElementById('theIframeId');
objIframe.style.height = 'auto';
document.body.scrollHeight
Finally - blog post here: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/and iScroll4may be worth looking at.
最后 - 博客文章在这里：http: //dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/和iScroll4可能值得一看。
回答by Bala Subramanyam
This can be solved by using the JQuery.
这可以通过使用 JQuery 来解决。
Lets us assume that you have the iframe as follows with an id
让我们假设您有如下带有 id 的 iframe
<iframe src="name.pdf" id="pdf_frame"></iframe>
now by using the JQuery we can make the height of the iframe as auto as you need to display the pdf inside the iframe.
现在通过使用 JQuery，我们可以根据需要在 iframe 内显示 pdf 来使 iframe 的高度为自动。
$('#pdf_frame').css('height','auto');
You can get the height as
你可以得到高度为
document.body.scrollHeight
