0

I am trying to display PDF document inline in my HTML. However, all the methods I know of shows me empty content area.

Please check an example here : http://codepen.io/abhishekisnot/pen/WxmPmd/?editors=1001

So far I tried using all the methods below:

<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>
abhishekisnot
  • 113
  • 2
  • 8

2 Answers2

1

You're probably not going to find a way that works consistently across browsers if you want to display the PDF as an actual PDF using the browser-based or browser plug-in based viewers. You'll need one of the JavaScript viewers instead since they convert the PDF to HTML5 and then display that.

Both the object tag and the embed tag rely on the browser plugins to display the content referenced by src or data, browsers like Edge, Chrome and Safari don't use a plugin to show PDF, they support it natively and supply their own chrome to navigate the PDF. I don't think these will work with those tags.

joelgeraci
  • 4,606
  • 1
  • 12
  • 19
0

Take a look at this question: Recommended way to embed PDF in HTML?. It has a lot of useful info.

However I implemented a slightly different solution, see this answer: https://stackoverflow.com/a/15971133/932282.

Community
  • 1
  • 1
mhu
  • 17,720
  • 10
  • 62
  • 93