Question

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

Answer 1

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

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

<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>

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

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

使用驱动器查看器，访问者无需任何其他软件/插件即可查看文件。

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

#yourcontainer { height: 100vh; }

Answer 2

您必须将width \ height设置为容器

<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>

Look example

Answer 3

以上所有答案均不适用于我。以下内容适用于我需要的每个平台（即，我没有测试IE）。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
  </body>
</html>

Answer 4

请务必使用<object> - EMBED vs. OBJECT

<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>

Answer 5

我喜欢PDF的html对象附带的功能，而不是像light.project这样的一些库，例如PDF.js。绝对不是最佳答案，但是我目前在Angular 6应用程序中将JQuery与Bootstrap结合使用，因此在视图加载后修改高度。

我设置了

        <object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>

然后在我的组件中，根据宽度与高度的比率调整高度。例如，一张8 x 11.5的文档将给出高度1.4375 x宽度。

  ngAfterViewInit(): void {
    var width = $("#pdf").width();
    $("#pdf").prop("height", width * 1.4375 + "px");
   }

看到这篇文章，以为我会发表。希望这会有所帮助，如果您认为这是不良的编码做法，请纠正我。

Answer 6

body {
    margin: 0;            /* Reset default margin */
}

iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

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

在全高度嵌入PDF

6 个答案: