Making embedded PDF scrollable in iPad

Question

I have a PDF embedded in HTML using the object tag. The embedded PDF is a big document and when viewed from my desktop the PDF is displayed properly with scrollbar in all th

Answer 1

I needed the same thing, so here I share.

Issues I faced:

• Cropped content : iframe on iOS (iPad) content cropping issue
• Scrollbars not shown : Making embedded PDF scrollable in iPad
• Cannot make full width

Please try the following:

http://jsfiddle.net/aknMJ/2/embedded/result/

Used tricks:

1. Read the document width and scale the PDF frame according to that
2. "width:100%" does not work with iframes in iPad, so I needed to use CSS3 transformations
3. Wait until the PDF is completely loaded and then show&resize the PDF frame. Otherwise the content was cropped.

$('#pdfFrame').hide();
var pdfFrame = document.getElementById('pdfFrame');
pdfFrame.contentWindow.location.replace(PDF_URL);
$('#pdfFrame').on('load', function () {
    $('#pdfFrame').show();
    var documentWidth = $(document).width()
    var scale = (documentWidth / width) * 0.95;
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")");
});