HTML内联PDF

时间:2016-08-18 02:24:38

标签: javascript html css pdf

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

2 个答案:

答案 0 :(得分:1)

如果您希望使用基于浏览器或基于浏览器插件的查看器将PDF显示为实际PDF,那么您可能无法找到在浏览器中一致运行的方法。你需要一个JavaScript查看器,因为他们将PDF转换为HTML5,然后显示它。

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

答案 1 :(得分:0)

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

但是我实施了稍微不同的解决方案,请参阅以下答案:https://stackoverflow.com/a/15971133/932282

相关问题