Embed a page from a PDF in HTML

Question

Is there a way to embed a page from a PDF inside HTML? The PDF is local, but so is the HTML (e.g, iframe with reference to file:///tmp/... may work)

I need it to work in Chrome only. I use it to create mockups.

Answer 1

You cannot extract a page from a PDF document with HTML, but you can embed a PDF file so that it is initially positioned at a specific page. For this, you append a fragment of the form #page=n to the URL of the PDF document; here n is the desired page number, in the the sequence of pages in PDF (so it does not match a page number in the document itself if it has cover pages excluded from the numbering). Example:

<iframe style="width: 100%; height: 820px" src="test.pdf#page=5"></iframe>

Whether this works depends on the software that renders the PDF document. It works in the built-in PDF viewer of Chrome.

However, there are browser-specific restrictions on embedding PDF file. You might consider using the object element instead of iframe (though it is difficult to say which element or combination of elements works best; the embed element might be considered, too).

<object style="width: 100%; height: 820px" data="test.pdf#page=5"
   type="application/pdf"></object>