How to Embed a PDF in a Website (4 Easy Methods)
Embedding a PDF in a web page used to require browser plugins. Today there are several clean ways to display PDFs inline — each with different trade-offs.
Method 1: Hosted link with embed code (recommended)
Host your PDF on a platform that provides an embed code, then paste it into your page.
How it works with Hostupa
1. Upload your PDF to Hostupa — you get a URL like hostupa.com/p/my-document
2. On the project detail page, copy the embed code (an <iframe> snippet)
3. Paste the code into your website's HTML
Benefits
- The PDF opens in a clean viewer with page navigation
- Works on all devices including mobile
- You can update the PDF without changing the embed code
- View tracking and analytics are included
- Optional password protection and download blocking
Example embed code
`html
<iframe src="https://hostupa.com/p/my-document" width="100%" height="600px" frameborder="0"></iframe>
`
Method 2: Google Drive embed
1. Upload the PDF to Google Drive
2. Set sharing to "Anyone with the link"
3. Use the embed URL: <iframe src="https://drive.google.com/file/d/FILE_ID/preview" width="100%" height="600px"></iframe>
Drawbacks: No custom branding, no analytics, no download control, and Google may show their own UI.
Method 3: Direct PDF link with `<object>` tag
`html
<object data="path/to/your.pdf" type="application/pdf" width="100%" height="600px">
<p>Your browser does not support PDFs. <a href="path/to/your.pdf">Download it instead.</a></p>
</object>
`
Drawbacks: You need to host the PDF yourself, and rendering varies across browsers. Mobile browsers often fail to display PDFs this way.
Method 4: PDF.js library
Mozilla's PDF.js library renders PDFs using JavaScript and Canvas. It works everywhere but requires significant setup:
- Include the PDF.js library
- Write JavaScript to load and render the PDF
- Handle page navigation, zoom, and responsive sizing yourself
This is overkill for most people who just want to show a PDF on their site.
Which method should you choose?
For 90% of use cases, the hosted link with embed code is the best option. It is the simplest to set up, works on all devices, and gives you analytics and control that the other methods cannot match.