Menü schliessen
Created: March 14th 2025
Categories: Common Web Development,  IT Development
Author: Tim Fürer

HTML: Embed PDF into Website

Tags:  guide,  HTML,  pdf
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Most modern browsers, especially on the desktop platform, come integrated with PDF readers. Thanks to that, we can embed PDFs directly into our websites for visitors to view. Here's how to do it.

The <object> HTML Tag

The <object> element allows us to make use of the browser's file handling capabilities. We provide a file and its MIME type and, if supported by the browser, it will be rendered appropriately. This even works with extensions that extend the browser's file handling capabilities. If the file type is unsupported, the contents of the <object> element are displayed as a fallback.

With this knowledge in mind, we can embed a PDF into our website like so:

<object data="foobar.pdf" type="application/pdf" width="100%" height="900px">
    This browser cannot render PDF documents.
</object>