HTML Inline 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并显示该查看器。

对象标记和嵌入标记都依赖于浏览器插件来显示由src或数据引用的内容，诸如Edge，Chrome和Safari等浏览器不使用插件来显示PDF，它们本身支持它并提供他们自己的Chrome来导航PDF。我不认为这些将与这些标签一起工作。

Answer 2

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

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