在 html 中嵌入 100% 宽度和高度的 pdf 文件？

Posted 2023-03-13

【中文标题】在 html 中嵌入 100% 宽度和高度的 pdf 文件？

【英文标题】：embedding pdf file within html with 100% width and height?

【发布时间】：2013-04-25 22:34:37

【问题描述】：

我正在尝试在 html 代码中嵌入一个 pdf 文档，我尝试了三种不同的方法，实际上给了我相同的结果：

<embed src="files/cv_aaragon_en.pdf"  >

<object data="files/cv_aaragon_en.pdf" type="application/pdf"  >
  <p>It appears you don't have a PDF plugin for this browser.
     No problem, you can still <a href="files/cv_aaragon_en.pdf">download the PDF file.</a></p>
</object>

<iframe src="files/cv_aaragon_en.pdf"  >

如图：

现在我有以下问题：

框架不使用页面的整个宽度（我认为这是正常的），因为灰色区域的两侧有很多空白。这不打扰我。 如果定义设置为，为什么不取全宽？为什么会有灰色地带？这让我很困扰，因为 pdf 文件应该更大，以便可读。 我可以更改宽度，但我不想硬编码它的值，这样无论设备如何，页面看起来都不错。有没有办法获取实际宽度并将其放入该宽度定义中？ 与高度相同，我需要它更大，但我不想硬编码它的值。这是怎么做到的？ 最后，考虑到上述三种方法，就加载速度而言，哪一种方法最好？

谢谢。

【问题讨论】：

当您将width 设置为100% 时，PDF 显示组件将被赋予整个宽度。不过，该组件会自行决定如何填充该宽度，并且通常会根据相关 PDF 中的设置来执行此操作。

【参考方案1】：

您可以尝试添加样式标签：

<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />