在全高度嵌入PDF [英] Embed PDF at full height

问题描述

我的问题......是否有可能将PDF嵌入到高度始终为100％的HTML文档中。问题是PDF的实际高度可能会有所不同，并且布局需要对此做出响应。

解决方案

在HTML中嵌入PDF有几种方法。

其中一个是使用 PDFObject 。下面的例子在firefox中开箱即用，您可以在他们的网站上找到大多数浏览器的更多说明。

 < object data =myfile.pdftype =application / pdfwidth =100％height =100％> 
< p>看起来你没有这个浏览器的PDF插件。 
没有biggie ...您可以< a href =myfile.pdf>点击此处
下载PDF文件。< / a>< / p> 
< / object> 
  

或者您可以使用谷歌浏览器查看器来显示任何PDF（以及更多的文件类型） ：

 < iframe src =http://docs.google.com/viewer?url=[http:// PATH-TO-YOUR-FILE.pdf]& embedded = truewidth =600height =780style =border：none;>< / iframe> 
  

使用驱动器查看器，访问者无需任何额外的软件/插件即可查看文件。 / p>

您可以使用css调整PDF容器的高度。即

  #yourcontainer {height：100vh; } 
  

My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.

解决方案

There are several ways to embed PDF in HTML.

One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="myfile.pdf">click here to
    download the PDF file.</a></p>
</object>

Or you could use the google drive viewer to display any PDF (and quite a few more file types):

<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>

Using the drive viewer your visitors don't need any additional software/plugin to view the files.

You can then adjust the height of the PDF container with css. i.e

#yourcontainer { height: 100vh; }

这篇关于在全高度嵌入PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！