DO YOU NEED A CONTENT WRITER FOR YOUR BUSINESS?

Your One-Stop Solution for All Content Needs! Click here for more!
Html

Embedding PDFs without JavaScript

Share

Without JavaScript, a PDF can be embedded into HTML pages. Embedding PDFs without JavaScript is a major part in HTML. In below there are 4 examples that describes how to use this common techniques. For embedding a PDF file into a HTML document, this is an open-source standards-friendly JavaScript utility.

We need to know that these examples work in all modern desktop browsers. The results will vary in older desktop browsers and mobile browsers too. But, as of iOS 9, none of these examples work properly in Safari for iOS.

<object>

If the browser doesn’t support PDF embedding then, using an <object> enables you to leave fallback content.

<object data="/path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">
<p>This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a></p>
</object>

<embed>

Not everywhere but, <embed> approach is widely supported for most of the browsers. This doesn’t provide any mechanism for fallback content. So, if the browser doesn’t support PDF embedding, the end-user does not see anything.

<embed src="path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">

Read Also: Download a HTML content as pdf using javascript

<iframe>

The <iframe> approach is widely supported for most of the browsers.

<iframe src="/path/to/pdf/sample.pdf#page=4" width="100%" height="100%">
This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a>
</iframe>

<object><iframe></object>

You can show PDF in browser using an <object> with an <iframe> fallback.

<object data="/path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">
<iframe src="/path/to/pdf/sample.pdf#page=4" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a>
</iframe>
</object>
Html Developer

Published by
Html Developer
Tags: htmlpdf

Recent Posts

How to Improve Your Computer Aided Personal Interview (CAPI) with Smart Multimedia Use

Finding a perfect way to enhance your computer-aided personal interview experience? There is no doubt…

5 hours ago

Talent Mapping for Strategic Growth: 7 Key Benefits

The process of talent mapping involves creating a comprehensive and detailed analysis of future industry…

5 days ago

10 Proven SEO Strategies to Boost Your Google Rankings in 2026

Introduction: The digital landscape is always evolving, and if there is one thing you can…

1 week ago

Generative AI for Beginners: Introduction to AI

Forget all the big fancy words and tech hype around “Artificial Intelligence” for now. The…

1 week ago

How Does Shade and Bad Weather Impact Solar Panels?

Solar panels work by converting the solar energy received from the sun into usable electric…

2 weeks ago

Websites Design Companies: How They Help Businesses Succeed Online

In today’s digital-first economy, your website is often the first impression your business makes. Whether…

2 weeks ago