Ionic/ cordova, show a pdf in a div

Question

I'm trying to show a pdf in my ionic app. I try to embed it in an iframe and in an object tag, but I'm never able to scroll it in my ios simulator. The tips which work in safari, don't do anything in that case.

So what is a good way to embed a pdf in a cordova application for ios?

Here is my pdf code:

   <div class="col document">
               <div class="scroll-wrapper">
                    <iframe src="{{currentDocument.document_url}}" scrolling="no"></iframe>

               </div>

</div>

And my last CSS:

#iframe-wrapper{height: 100%; min-height: 100%;}
.scroll{height: 100%;}
.scroll-wrapper{  
     width: 100%;
    height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}
.scroll-wrapper iframe{  
        width: 100%;
    height: 500px;
}

Could you show the iframe code? I wonder if it has anything to do with [iframe scrolling for ios](http://stackoverflow.com/questions/26046373/iframe-scrolling-ios-8) or [iOS8 scroll problems](http://stackoverflow.com/questions/26176288/webkit-overflow-scrolling-touch-breaks-in-apples-ios8). — daniel.caspers, Aug 13 '15 at 13:46
unfortunatly, i've tried all those solutions, but nothing work in the app (but it's ok in the browser) — Jaycreation, Aug 14 '15 at 06:11
@Jaycreation - how did you get the PDF to show up in the iFrame in Ionic? I used a url direct to the PDF file and it couldn't interpret the file format. Then I created a pdfViewer.html on a remote server and in the html did a `` and it won't show the file — rolinger, Aug 27 '23 at 02:19

score 0 · Answer 1 · answered Aug 24 '15 at 05:42

thank you blazebiker for your help. I managed to partially fixe the issue by adding a wrapper with an overflow and fixing the height of the iframe. This solutino does not work on ios emulator, but it works on the device. It's not perfect so if anyone else has a real solution i'm still interested.

Ionic/ cordova, show a pdf in a div

1 Answers1