Embed a PDF in HTML without downloading it
There are several HTML elements that can be used to view Portable Document Format (PDF) files in HTML. The <embed>
, <object>
and <iframe>
elements can all display a PDF file within the web page. Each works in a very similar way, but which one to choose? Let’s find out.
How to embed PDF in HTML?
After experimenting with many options we’ve seen that combination of <object>
with fallback to an <iframe>
that points to Google Docs Viewer works most optimal.
Desktop browsers support embedding PDF in HTML quite well. However, mobile devices may not always render as we expect therefore we recommend to include also a link to the original document so it can be downloaded.
Example code
<a href="https://www.example.com/file.pdf" download>Example PDF</a> <object data="https://www.example.com/file.pdf" type="application/pdf" style="height: 800px; max-width: 56rem; width: 100%;"> <iframe src="https://docs.google.com/viewer?url=https%3A%2F%2Fwww.example.com%2Ffile.pdf&embedded=true" style="height: 800px; max-width: 56rem; width: 100%;" frameborder="0"></iframe> </object>
Note that the URL
param must be encoded. Example window.encodeURIComponent('filename=file.pdf')
where output becomes filename%3Dfile.pdf
.
Workable example
You may also download document Web Browser – Wikipedia in PDF format.
Comments