This is a migrated thread and some comments may be shown as answers.

Embed PDF

29 Answers 178 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mat-Moo
Top achievements
Rank 1
Mat-Moo asked on 18 Nov 2012, 11:26 PM
Is there an easy way to embed a pdf to open with a native viewer? I've linked them as normal, and they open, but it seems limited and no back button.

I know new functions/features are by vote, however a clue as to what's being added now would be welcome. I love this product but at present with so few plugins it just seems a bit limited (At least for b2b apps)... My fav mobile development system so far,but not yet usable by me:( (I need email, push notifications, fairly basic stuff for an app these days).

29 Answers, 1 is accepted

Sort by
0
Stefan Dobrev
Telerik team
answered on 19 Nov 2012, 11:03 AM
Hi Mat,

You can use the Child Browser plugin to open PDF files in a separate view. Here is a walk-through how to use the plugin.

Regarding the next plugin we are going to integrate the feedback portal is the place that drives us. We will also have a feature roadmap on our site that outlines the next big features we are working on so stay tuned.

Hope this helps,
Stefan Dobrev
the Icenium team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 19 Nov 2012, 12:28 PM
Thanks for taking the time to reply - Where is the featured roadmap?

As for the plugin, I can see how to include it, but then how to use it? The docs don't actually say (Found the answer in google, but you should say in that page how to use it)... Still how can I allow things like pinch'n'zoom, close etc.?
0
Stefan Dobrev
Telerik team
answered on 20 Nov 2012, 08:21 AM
Hello Mat,

Roadmap page is not yet public on our site. We are going to announce in the upcoming weeks.

Regarding the Child Browser plugin here is its API (presumably you have found the same link). We are going to investigate what is the best way to enable pinch/zoom when files are opened. For HTML files you can simply play with a meta tag, but that's not the case for standalone files.

-sdobrev 


Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 20 Nov 2012, 08:14 PM
Sorry, misread the roadmap bit.
Yep, child browser is working fine... but for my app (for a large corporate) I need to be able to offer pinch-n-zoom etc. on the pdf docs as well.
0
Mat-Moo
Top achievements
Rank 1
answered on 23 Nov 2012, 09:28 AM
Is it possible to open a new windows with a title bar (close on it) and embed the pdf as an iframe with pinch'n'zoom etc.? or can the OS default PDF reader by instigated to view the pdf? I need to make a choice on platforms *really* soon to use for my app. This is my biggest stumbling block at present.
0
Stefan Dobrev
Telerik team
answered on 23 Nov 2012, 06:32 PM
For iOS for example you can change the location's href to make the Safari browser to open the pdf file: 
window.location.href = 'http://samplepdf.com/sample.pdf';

From there you might will have an option to pinch/zoom or open the file in a separate program.

Hope this helps,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 21 Jan 2013, 08:53 PM
Bringing this up again, I've got a local file /assets/my.pdf which I'm trying to open in the childbrowser, but it keeps coming up with file not found. I just can't seem to get the path right?
0
Stefan Dobrev
Telerik team
answered on 23 Jan 2013, 11:33 AM
Hi Mat,

If you build your app in Debug we will unpack your application files (assets/content) in a separate location in order to enable LiveSync. This means that the root path for the index.html will be different in Debug and Release.

My suggestion for you is to store this PDF in a folder in your project and reference it with relative path from the index.html. Alternatively you can use the Cordova's File API to get path to the file stored somewhere on the file system.

Hope this helps,
Stefan Dobrev
the Icenium team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 29 Jan 2013, 11:15 PM
Thanks, struggling with this still and suppose to have this complete tomorrow, this is my last hurdle. Can you give an example of the File API, couldn't get this to work at all.
Not that keen on embedding a PDF, would rather have a clever multi page image with pinch and zoom, but not really sure how to accomplish that. Ideas welcome - in fact I'd rather like someone to look over the app and give feedback good/bad.
0
Ivan K. Ivanov
Telerik team
answered on 30 Jan 2013, 11:24 AM
Hello Mat,

By using the ChildBrowser plugin, I was able to open a local pdf file (located in the root of an Icenium project) under iOS only.

Unfortunately, under Android, I was able to open only a non-local PDF, on some Internet url.

This seems to be a limitation of the ChildBrowser plugin. I'm sending you a code sample below for a reference:

function onDeviceReady() {
    $("#btnOpenPDF").click(function() {
        
        var url = window.location.href.replace('index.html', 'sample.pdf');
        
        if (device.platform == 'iPad' || device.platform == 'iPhone') {
            
            window.plugins.childBrowser.showWebPage(url);
        } else if (device.platform == 'Android') {

            window.plugins.childBrowser.openExternal("http://samplepdf.com/sample.pdf");
        }
    });
}

 

Greetings,
Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 30 Jan 2013, 08:15 PM
Ok, kind of leaves me SCREWED as this project has a completion date of 31st Jan to go to iTunes store by the 5th Feb!!! 

I can see two options and would really like some major quick support with this:
1) Cordova 2.3 seems to have a new InAppBrowser that looks like it correctly supports PDF browsing. How hard is it to add Cordova 2.3 (and 2.4?) to Icenium?
2) I can convert the PDF to a batch of images - this will allow me to show an image with zoom-in/out however if I try multiple images then go under each other... would there be a way to get swipe to move between images, or thumbnails or something to do this.

Help me Telerik your my only hope...
0
Mat-Moo
Top achievements
Rank 1
answered on 30 Jan 2013, 11:04 PM
For my #2 http://demos.kendoui.com/mobile/splitview/appearance.html could work? although this would be on tablet, it could be any mobile device? Why is it marked as (tablet)? seems ok on htc oneX
0
Ivan K. Ivanov
Telerik team
answered on 31 Jan 2013, 09:29 AM
Hi Mat,

We will upgrade to Cordova 2.4 in 6 to 8 weeks.

Fortunately, we found out how you can open a PDF file using childBrowser in Adnroid too. You should use the following url format:

file://mnt/sdcard/.../.../filename.pdf

Here is the reworked version of the code sample I sent you yesterday:
$("#btnOpenPDF").click(function() {
     
    var url = window.location.href.replace('index.html', 'sample.pdf');
     
    if (device.platform == 'iPad' || device.platform == 'iPhone') {
         
        window.plugins.childBrowser.showWebPage(url);
    } else if (device.platform == 'Android') {
 
        url = url.replace('http', 'file');
        window.plugins.childBrowser.openExternal(url);
    }
});

You should have no problems to open a PDF file under iOS using the ChildBrowser, have you?

Kind regards,
Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 31 Jan 2013, 11:03 PM
Thanks, but that is opening from the sd card not local storage?
I was disappointed to find that split view can't be used in a view :( what I want to do is save each page as an image to allow zoom and scroll etc. then two buttons to page through as required... any advice to achieve this is welcome. Not a happy client today, not nice being late - but there we go. 
0
Jordan
Telerik team
answered on 01 Feb 2013, 07:51 AM
Hi Mat-Moo,

to your question: It is supposed to open PDF file from same folder as index.html in your application. Please check again the example provided by Ivan.

We also made a sample application to demonstrate open PDF file in both Android and iOS using Icenium and the Child Browser plugin.
Everyone can Clone it from Sample Projects in Graphite or Mist.

Note: Plugins do not work in simulators so test on real device only.

Regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Relez
Top achievements
Rank 1
answered on 27 Feb 2013, 07:08 PM
Hi, I am trying to add the ChildBrowser plugin to my project in Graphite, and when I am trying to add the including line in the HTML file, I see the error in the console when the application loads, this is my line:
<script type="text/javascript" src="Plugins/Child Browser/childbrowser.js"></script>
And this is the error showed in the console:
Failed to load resource http://local/Plugins/Child%20Browser/childbrowser.js

Seems like theres a problem with the space between Child and Browse.
Thanks for the help!

0
Relez
Top achievements
Rank 1
answered on 27 Feb 2013, 07:09 PM
Hello Jordan, how can I clone the PDF Sample Application to my Icenium Graphite?

Thanks!
0
Bart
Top achievements
Rank 2
answered on 11 Mar 2013, 02:30 PM
Hi Jordan,

Is there still issues with opening pdf's from local storage with the Child Browser.
I have cloned the sample project from git and ran it on my device without any luck.

I also tried manually adding the url ( "file:///storage/sdcard0/Icenium/com.telerik.sample_file_open_pdf/sample.pdf" ) which is the correct path to the sample pdf on my device but still no luck, it forces the "http://" in front

Thanks
0
Jordan
Telerik team
answered on 12 Mar 2013, 08:08 AM
Hi Relvis,

You can clone any sample project from Icenium Mist or Graphite just go to Clone > Sample Projects. Unfortunately just recently we found that due to some security restrictions our sample will not work for Android with current Cordova API when in release mode (for published apps). We are looking for a workaround, but did not have luck so far.

All the best,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
answered on 17 Apr 2013, 06:39 AM
What's the current state of PDFs on android then? This has now come back for my app, and whilst we can get this to work as expected onions, android is causing us grief, as it only works on 1 out of 3 of our devices?
0
Steve
Telerik team
answered on 17 Apr 2013, 01:48 PM
Hi Mat,

The status is as described in our last post. There is no progress from our end on this as it is a security restriction in Cordova and we have not been able to find a way around it.

All the best,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
Mat-Moo
Top achievements
Rank 1
answered on 18 Apr 2013, 07:37 PM
Badly worded by me, sorry. I meant to ask what security restrictions these are, and if there is any bug tracking or anything I can investigate on my side or with cordova
0
Steve
Telerik team
answered on 19 Apr 2013, 12:35 PM
Hello Mat,

We could not find any "official" acknowledgement of this problem from Cordova except this discussion in their group, where you can chime in and ask for an update.

Regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
Mat-Moo
Top achievements
Rank 1
answered on 19 Apr 2013, 01:40 PM
Hi Steve

that would be useful, I have explored a lot of other conversations and still not sure what to do with this. Got about a week windows to say to customer yea or ney now. Works brill on some, but not others :(

Mat
0
Mat-Moo
Top achievements
Rank 1
answered on 03 May 2013, 07:09 AM
Hate too chase but my client is now chasing me on this.  Where else should I ask/post about this in relation is codorva?
0
Kristian D. Dimitrov
Telerik team
answered on 07 May 2013, 06:41 AM
Hello Mat-Moo,

You can upload your files online and on first start of your application to use the FileTransfer object of the File System Cordova API to download the files and save them on the SD card. Then your files should be easily opened using ChildBrowser or InAppBrowser. Here is a sample for the FileTransfer 
(it's for an image file but the concept is the same).

For opening the PDF you can see this or this sample.

All the best,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
Mat-Moo
Top achievements
Rank 1
answered on 09 May 2013, 06:45 AM
Thanks for that will try this out. Now I'm wondering how to keep 2 versions of my app as the ios/android versions will be different. One will have the, embedded and the other will download?
0
Steve
Telerik team
answered on 09 May 2013, 07:55 AM
Hi Mat-Moo,

Are the iOS/Android versions going to differ only by the way the PDF file is served? If so, it would probably be best to use FileTransfer for both platforms, in order to avoid maintainability issues.

Greetings,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.
0
Mat-Moo
Top achievements
Rank 1
answered on 12 May 2013, 09:22 PM
Hi Steve,

I wasn't sure if that method would work on IOS, if it does then I can try it out, and let you know how I get on.
Tags
General Discussion
Asked by
Mat-Moo
Top achievements
Rank 1
Answers by
Stefan Dobrev
Telerik team
Mat-Moo
Top achievements
Rank 1
Ivan K. Ivanov
Telerik team
Jordan
Telerik team
Relez
Top achievements
Rank 1
Bart
Top achievements
Rank 2
Steve
Telerik team
Kristian D. Dimitrov
Telerik team
Share this question
or