How to embed a PDF in an HTML page?

Question

I need to embed a PDF file in an HTML page for the users to see it on every major device. Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.

I used the following techniques to overcome the problem:

1) Using pdf-image for node and converting the PDF to images and then sliding them in a div. The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.

2) Using PDF.js by Mozilla It works fine on every device but it makes the page extremely slow and unresponsive on iPad

3) Using Google PDF viewer

<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>

The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.

None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.

One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?

Can anyone please help? :(

Thanks in advance!

Acarus

This might help you. w3docs.com/snippets/html/how-to-embed-pdf-in-html.html – Art

This also might help sitelint.com/blog/… – Sloane

Answer 1

<embed src="http://example.com/the.pdf" width="500" height="375" />

Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js

Kilowatt

Doesnt work on iPad. I've already mentioned this in my question. – Acarus

You are telling me things which I've already tried.Read my question please – Acarus

Unresponsive means it's up to your pdf size. Your page will be freezing while loading pdf. At that time, you better make some tricky part as make visibility: hidden while page is loading and change to visibility: inline when page is loaded completely. – Kilowatt

Answer 2

I think the simplest way to embed a PDF into a web page is to use the object tag:

<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
 <p>It appears you don't have a PDF plugin for this browser.
 No biggie... you can <a href="assets/test.pdf">click here to
  download the PDF file.</a></p>
</object>

What the code above will do is: - If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser: - If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.

Saprophagous

Let me try that on an iPad – Acarus

Doesnt work on iPad :( Just shows the first page and some part of the second page. And no scroll bar avaiable to scroll the pdf – Acarus

@PyaePhyoeShein I am testing this on safari only. Any workaround for this? – Acarus

@Acarus i have no idea to use <object> for apple device. Could you try what I've mentioned under my post? – Kilowatt

@Acarus This is the compatibility list of browsers for the object tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/… Would it be possible to post your cost on Stackblitz – Saprophagous

@Saprophagous I'm using this to show a PDF in a WebView2 control in a WPF solution. I see that there is a "find" button in the viewer that lets you find a piece of text in the PDF. Do you know of a way to pass a "find" string into the viewer programmatically by modifying the "object" tag? – Chagall

Answer 3

I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.

However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:

<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
    <!-- Your fall back here -->
    <img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>

You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.

There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.

You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.

Mu