如何使用 <embed>

Question

我使用以下代码在我的网站上嵌入 PDF：

<embed src="{link_to_my_pdf}"
    type="application/pdf" width="100%" height="300" />

它的高度为 300px。如果我单击 PDF 窗口上的全屏按钮，它不会全屏。它只是在 300px 窗口中扩展。如何使其在整个窗口上全屏显示？

Answer 1

pdf 窗口内的按钮不是全屏按钮，而是“适合页面”按钮，因此文档只会扩展以填满其父容器。全屏按钮是 F11，但如果 pdf 查看器的高度设置为 300px，则按下 F11 后查看器将不会填满整个屏幕。

一个潜在的解决方案是在站点的单独窗口中打开 pdf，并在 a 标签上添加 target="_blank" 属性，以便可以在全屏模式下查看 pdf 并填满整个屏幕。

另请记住，embed 是一个已弃用的标签，我建议使用 iframe 或 object，以下任一选项都应适用于所有现代浏览器：

iframe

<iframe src="some.pdf" style="min-height:100vh;width:100%" frameborder="0"></iframe>

物体

<object data="some.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>

以下是已弃用的 HTML 标签列表，以供将来参考： https://www.w3docs.com/learn-html/deprecated-html-tags.html

Answer 2

您可以为

allowfullscreen

添加

iframe

属性，这样您就可以点击 HTML5 播放器工具栏中的“全屏”按钮进入全屏。或者您可以使用 JavaScript 来为您完成此操作。由于

embed

正在贬值，因此使用

iframe

，因为它将产生类似的结果。 代码将与此类似：

<iframe allowfullscreen src="path/to/pdf" style="position:absolute; top:0; left:0; width:100%; height:100%; border: none; overflow: hidden;"></iframe>

这里专门声明了position，让文件完全适合窗口。根据需要更改位置属性。