How to Embed a PDF in Your Blog or Docs Site (Without Filling Up Your Server)
# How to Embed a PDF in Your Blog or Docs Site
PDFs are everywhere — datasheets, whitepapers, invoices, slide decks. Most blogs handle them badly: uploaded to the same origin, served by WordPress or Ghost, slow on the first hit, and impossible to share externally.
## The fix: put the PDF behind a CDN
Upload the PDF to a CDN-backed host (Cloudflare R2 works great), then embed it with one of the patterns below.
### Pattern 1 — <iframe> inline preview
```html
<iframe
src="https://imagetourls.com/files/your-doc.pdf"
width="100%"
height="600"
style="border:0">
</iframe>
```
### Pattern 2 — direct download link
```html
<a href="https://imagetourls.com/files/your-doc.pdf" download>
Download the datasheet (PDF, 1.2 MB)
</a>
```
### Pattern 3 — React/MDX
```jsx
<object data={pdfUrl} type="application/pdf" width="100%" height="800">
<p>Your browser does not support inline PDFs.
<a href={pdfUrl}>Download instead.</a></p>
</object>
```
## Why not just put it on my server?
- A 5 MB PDF will eat your monthly bandwidth the moment a Hacker News thread links to it.
- A CDN handles the cache; your origin does not.
- A direct URL is shareable in Slack, Discord, and email without re-uploading.
On [imagetourls.com](https://imagetourls.com), PDF uploads up to 100 MB are supported on the free tier, served via Cloudflare, and the URL is hotlink-friendly by default.