HTML 内联 PDF答案

【问题标题】：HTML Inline PDFHTML 内联 PDF
【发布时间】：2016-08-18 02:24:38
【问题描述】：

我正在尝试在我的 HTML 中内嵌显示 PDF 文档。但是，我所知道的所有方法都显示为空的内容区域。

请在此处查看示例：http://codepen.io/abhishekisnot/pen/WxmPmd/?editors=1001

到目前为止，我尝试使用以下所有方法：

<object data="http://www.pro-react.com/materials/appendixA.pdf" type="application/pdf" width="100%" height="100%" style="border: 1px solid red;"></object>

<embed src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" type='application/pdf' style="border: 1px solid red;">

<iframe src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" style=" border: 1px solid red;" frameborder="0"></iframe>

【问题讨论】：

标签： javascript html css pdf

【解决方案1】：

如果您想使用基于浏览器或基于浏览器插件的查看器将 PDF 显示为实际的 PDF，您可能不会找到一种跨浏览器一致工作的方法。您将需要其中一个 JavaScript 查看器，因为它们会将 PDF 转换为 HTML5，然后显示它。

object 标签和 embed 标签都依赖浏览器插件来显示 src 或 data 引用的内容，Edge、Chrome 和 Safari 等浏览器不使用插件来显示 PDF，它们原生支持它并提供他们的自己的 chrome 浏览 PDF。我认为这些不适用于这些标签。

【讨论】：

【解决方案2】：

看看这个问题：Recommended way to embed PDF in HTML?。它有很多有用的信息。

但是我实现了一个稍微不同的解决方案，请参阅这个答案：https://stackoverflow.com/a/15971133/932282。

【讨论】：