如何在html中嵌入pdf文件？答案

【问题标题】：How to embed pdf file in html?如何在html中嵌入pdf文件？
【发布时间】：2020-08-19 22:33:53
【问题描述】：

我想在我的 html 中嵌入 pdf 文件（使用 embed 标签或 iframe 标签）。

我已经尝试了以下两个。 在 Firefox 上运行良好，但在 chrome、chromium 和 android 浏览器上运行良好。

<embed type="application/pdf" src="myfile.pdf"></embed>
<iframe class="embed-responsive-item" src="myfile.pdf" allowfullscreen></iframe>

我也尝试使用 php 读取 pdf 文件，然后使用 iframe 像这样显示它

header("Content-type: application/pdf");
header("Content-Disposition: inline; filename=".$_GET['pdf']);
@readfile($CONFIG['PDF']."/".$_GET['pdf']);

同样，这不适用于 chrome / chromium 和移动浏览器。它仅适用于桌面版 Firefox。

我不确定这是否是重要信息，但我也 将 X-Frame-Options 设置为“ALLOW-FROM mydomain.com”

Here 你会找到一个问题的例子。

还有其他方法可以在网页上嵌入 pdf 文件吗？

【问题讨论】：

您是否收到任何错误消息？他们只是没有在 Chrome 中呈现还是没有被请求
我的浏览器上确实有一条我没有注意到的错误消息。它显示“X-Frame-Options：“ALLOW-FROM mydomain.com”。基于developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…，这是已弃用的。我将其更改为“SAMEORIGIN”，但问题仍然存在。
它是有效，但您可能需要向下滚动到该页面上的“浏览器兼容性”部分……
你是对的。我已经更改了它，并且没有错误消息。 PDF 文件仍然无法在 chrome / chromium 等上加载。

标签： php html pdf iframe browser

【解决方案1】：

Android 上的 Chrome 浏览器不再支持 PDF 嵌入。您可以使用 Google Drive PDF 查看器获取此信息：

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

您也可以为此目的使用 Google PDF 查看器。您需要先在某处上传您的 PDF，然后使用它的 URL：

<iframe src="http://docs.google.com/gview? url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

【讨论】：

谢谢。这确实有效！我尝试了“Google PDF 查看器”，因此我不必对现有代码进行大量更改。我还发现了一个代码笔，它让我的想法变得更加简单。 codepen.io/Ranjithkumar10/pen/PGogxW