How to embed a PDF in HTML without downloading it

Embed a PDF in HTML without downloading it and using third-party plugins.

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.

Embedding PDFs in HTML with a step-by-step guide

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.

Sample code for embedding PDFs in HTML without using third-party plugins

So, let’s show PDF in HTML without downloading.

<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%;" aria-label="Web browser definition from Wikipedia in PDF format">
  <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 parameter must be encoded. URL encoding ensures that only valid characters are sent in the URL. Example globalThis.encodeURIComponent('filename=file.pdf') where output becomes filename%3Dfile.pdf.

Practical Example for embedding PDFs in HTML and CSS

You may also download document Web Browser – Wikipedia in PDF format.

What happens if the PDF is too large to fit within the iframe or viewer provided by the cloud service?

If the PDF file is too large to fit within the iframe or viewer provided by the cloud service, several issues may arise:

• Rendering Issues: Due to the viewer’s size limitations, the PDF may not display correctly or at all. This may result in missing content or poor rendering quality.
• Performance Issues: Loading a large PDF may result in performance issues, such as slow loading times or high memory consumption. This can result in a poor user experience.
• URL Length Limitations: Some browsers have a hard limit for URL length. If the PDF is included via a data URL, its size may exceed this restriction, causing it to fail to load.

To mitigate these issues, consider the following solutions:

• Use Parameters to Customize the Viewer: You can use parameters to customize the viewer’s behavior. For example, you can set the zoom level to fit vertically or horizontally, or set a specific zoom level. This can help ensure that the PDF fits within the viewer, even if it’s large.
• Split Large PDFs: If the PDF is excessively large, consider splitting it into smaller parts. This can make it easier for users to navigate and reduce the amount of data that needs to be loaded at once.
• Compress the PDF: Compressing the PDF can significantly reduce its size without noticeably impacting the quality. There are many tools available online that can compress PDF files.