Best way to display a PDF from base64-string

Thread is closed for posting
7 posts, 1 answers
  1. Andreas
    Andreas avatar
    6 posts
    Member since:
    Jul 2013

    Posted 22 Dec 2013 Link to this post

    Hello,

    I recieve a PDF from a WebService as a base64 string. Now I don't know which way is the best to display the pdf on mobile devices or which ways are possible. So is it possible to give the base64 string directly to some kind of pdf viewer instance like shown in the examples "InApp Browser/Childbrowser" or do I really need to convert the base64 to a binary array, write it into the local file storeage and open the file?

    regards and a happy x-mas!


  2.
  3. iliev
    Admin
    iliev avatar
    40 posts

    Posted 23 Dec 2013 Link to this post

    Hello Andreas,

    For iOS you can open base64-ed pdf by navigating to the following data uri:
    data:application/pdf;base64,YOURBASE64DATAHERE

    I'm afraid that you can't do this in Android so you can follow this stackoverflow thread to get more ideas and decide what is the best solution for you.

    The universal way around is as you said - write it to the local file storage and open the file.

    Best wishes and happy holidays,
    iliev
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Answer
    Andreas
    Andreas avatar
    6 posts
    Member since:
    Jul 2013

    Posted 17 Jan 2014 Link to this post

    Hey,

    we created a "simple to use" solution. The Base64-String is converted to a ArrayBuffer, subsequently the buffer is written into a file on the local filesystem. Then the file is opened by the operating system.

    If somebody is interessted in doing stuff like that, you can have look on by blog and/or just download the Javascript file or Icenium project.

    http://blog.slxdev.net/?p=14
  7. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 24 Mar 2015 Link to this post

    Hello,

    I am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.

    For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
    window.open(urlData, "_blank", "location=no,enableviewportscale=yes");

    I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.

    Alternative: just store that whole data string in your database. Then when you render your <img>tag you can simply dump it into the src attribute:<img src="<< base-64 encoded data string>>" /> 

    After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.

    Thanks,
    Nirav








  8.
  9. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 27 Mar 2015 Link to this post

    Hi Nirav,

    If I understand correctly, you got the functionality related to visualizing the base64 string as an image and you only need to make it possible to open and close this image. There are various JS plugins for opening an image or other element in a popup. One option is the jQuery Popup:
    jQuery Popup

    Take a look at the third example (Photo Lightbox) for a similar scenario.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  11. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 27 Mar 2015 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    Thanks for the reply. Yes i want to open image in pop up, but i am getting image URL. But i don't want to open image and user has to click the image.

    I am trying window.open(url, _blank). But instead of window.open i want once user clicks on attachment link preview needs to display on same page. same like email attachment preview.

    Thanks,
    Nirav
  13. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 01 Apr 2015 Link to this post

    Hello Nirav,

    Did you check out the lightbox sample on the page that I linked to? It does what you describe. You define a popup with your image, which isn't initially visible. When triggered, the popup displays on the same page.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  14.
Back to Top