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.