以全高嵌入 PDF答案

【问题标题】：Embed PDF at full height以全高嵌入 PDF
【发布时间】：2014-11-04 03:27:56
【问题描述】：

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

【问题讨论】：

如何嵌入 pdf 文档？

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我喜欢 PDF 的 html 对象附带的功能，而不是像 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");
   }

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

【讨论】：

【解决方案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>

【讨论】：

这太好了，谢谢

【解决方案4】：

确保您使用<object> - EMBED vs. OBJECT

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

【讨论】：

值得注意的是，这在 HTML5 中并不完全正确 - <embed /> 标签是 the official standard 的一部分。

【解决方案5】：

有几种方法可以在 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>

或者您可以使用 google drive viewer 显示任何 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; }

【讨论】：

我可以让这个方法使用全高。有人让它工作吗？否则很好的回应！
@cholewa1992 你的意思是“我无法让这种方法使用全高”？
@IfediOkonkwo 是的，对不起。这就是我所说的
@cholewa1992 将此添加到页面的 css: html, body { height: 100%; }

【解决方案6】：

您必须设置容器的宽度\高度

<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

【讨论】：

感谢您的帮助。我正在使用库 openHtmlToPdf，它没有考虑图像标签的高度或 CSS 高度属性。最后，您的解决方案有所帮助。非常感谢