HTML内联PDF

Question

我正在尝试在我的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>

Answer 1

如果您希望使用基于浏览器或基于浏览器插件的查看器将PDF显示为实际的PDF，那么您可能找不到一种跨浏览器一致工作的方法。您将需要一个JavaScript阅读器，因为它们会将PDF转换为HTML5格式并显示出来。

object标签和embed标签都依赖于浏览器插件来显示src或data引用的内容，Edge、Chrome和Safari等浏览器不使用插件来显示PDF，它们本身就支持插件，并提供自己的chrome来导航PDF。我不认为这些标签会对这些标签起作用。

Answer 2

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

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