Best IT Recipes

Make embedded PDF scrollable on iPad

For some reason, the Safari browser for iPad does not process embedded PDF files. PDF files are perfectly visible when run offline, but not with an object tag. The problem is that they do not scroll.

I have a jquery page with a built-in pdf that scrolls nicely on mozilla and chrome, but on safari (iPad) the PDF remains stuck on the first page and doesn't scroll. The question is, how do I make this work in the iPad browser?

A similar question was posted here. Embedding PDF firmware in the iPad , but the answer is not very good. They cheat using a height of 10,000 pixels, which creates a lot of spaces for a small document and may not work for a very large document:

<!DOCTYPE html> <html> <head> <title>PDF frame scrolling test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style> #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; } object { width: 500px; height: 10000px } </style> </head> <body> <div id="container"> <object id="obj" data="my.pdf" >object can't be rendered</object> </div> </body> </html>

Any way to do this without hard coding crazy heights?

+14
jquery html pdf ipad
Apr 6 '13 at 18:32
source share
7 answers

For years I tried to find a solution to this problem. I will try to save anyone who has been looking for this for a while: THIS PROBLEM IS NO SOLUTION. The way Safari handles PDF rendering is hopelessly against the whole concept of embedding PDF in a web page. Moreover, all browsers on the iPad are REQUIRED to use the Safari rendering engine, so you won’t even be able to instruct users to install another browser.

The only way to embed PDF with good results is to use some third-party rendering utility. There are some jQuery solutions, but for my purposes, I found the easiest way to do this is to insert the google doc view link into the object or iframe tag. This is relatively easy to do, and you can find simple instructions here:

How to view Google Drive PDF link in iframe

This solution includes good visualization of the display and easy control of pagination and scaling. Be sure to include the & embedded = true parameter if you embed it in an iframe or object tag or it will not work. To view, you need the public URL of your document, so if you have security problems like me, you will need to write a web service to serve the document using a one-time token.

There is a good web page that lists several other options if you are looking for something more reliable:

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

+19
Dec 12 '13 at 20:47
source share

PDF.js might be the right choice. It works great for us.

You just download it from https://mozilla.imtqy.com/pdf.js/ and post it on your website.

Then it can be included in the iframe.

 <iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>

The demo can be found here: https://mozilla.imtqy.com/pdf.js/web/viewer.html

Hello

+16
Sep 11 '15 at 8:24
source share

MSD's answer is pretty accurate. I tried to do this differently, from some of the libs suggested to use an object, inline element, etc.

In any case, it does not scroll me (iPad 2 and Air 1, at least on iOS 8). Either it scrolls with an overly long letter or only works on short 1-2 page documents.

The solution that I found most effective is to provide iPad users with users through the user agent for direct access to the file, they will be able to see it on the tab and scroll through it. It is not embedded, but it is the most efficient and effective solution that I could find for my current needs.

I hope this helps someone delve into the same thing.

+2
Jun 05 '15 at 14:08
source share

You do not need to set the height of the object to something crazy, just set it to the same height as your container element. To scroll using a hopeless Safari rendering object, you need to use two fingers (up / down and left / right).

I also have these properties set in my container:

 overflow: scroll; -webkit-box-pack: center; -webkit-box-align: center; display: -webkit-box;

Something that I could not achieve was to fill the width of the container, but at least you can navigate through the document.

+1
Sep 02 '14 at 16:11
source share

Another solution (without coding) is to use Google if you want to use attachments only selectively.

  1. Save PDF to your Google Drive
  2. Open it with a preview.
  3. Select "Open in a new window" in the submenu of the three items.
  4. In the new window, select "Insert Item" in the three-item submenu.
  5. Copy the iframe code and paste it into your page.

Here you can also find detailed instructions, and in step 12 you can see the iframe code.

example but in german

0
Jan 16 '19 at 5:52
source share
 static downloadPdfChromeApp(linkSource: string) { // Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data const divpdf = document.createElement('div'); divpdf.innerHTML = '<div style="display:none;position:absolute">' + '<object style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' + linkSource + '"></object></div>'; document.firstElementChild.appendChild(divpdf); const frame = document.getElementById('docuFrame') as HTMLObjectElement; window.open(frame.data); divpdf.remove(); }
0
Jul 29 '19 at 11:26
source share

Hope this can help others in the future. I used the Google PDF Viewer to be able to scroll through the PDF in an iframe. So for the src tag the url

https://docs.google.com/gview?url= + 'Insert link in PDF + inline = true

0
Sep 12 '19 at 7:23
source share


More articles: