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

Open PDF

14 Answers 285 Views
HTML5, CSS, JavaScript
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
totoro
Top achievements
Rank 1
totoro asked on 21 Dec 2012, 07:54 AM
Hi,
I have to do an application for iOS and Android.
I would like to know, how i can include PDF file inside my application ??
I installedthe Plugin "Childbrowser"  in my icenium project but dosn't work...
Any ideas or thoughts are welcome, even ideas on how to display the pdf not inside the app.

14 Answers, 1 is accepted

Sort by
0
Ivan Ivanov
Telerik team
answered on 25 Dec 2012, 05:55 PM

Hi there,

You are on the right way. Childbrowser can be used to open .pdf files in separate view.

You can check this post for more information and you could try the sample for childbrowser.

If you have any questions, please do not hesitate to contact us again.

Kind regards,
Ivan 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
totoro
Top achievements
Rank 1
answered on 02 Jan 2013, 08:40 AM
Hi,
first, Happy new year !
And thanks for your reply. I did exactly what it was indicate but it still doesn't work...
I tried :
<script src="Plugins/Child Browser/childbrowser.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
      and
window.plugins.childBrowser.showWebPage('http://www.fortrel.net/sang/sang.pdf');
      or
window.location =  'http://www.fortrel.net/sang/sang.pdf';
      or in html
<a href="http://www.fortrel.net/sang/sang.pdf">clic</a>

but no one worked...
0
Ivan Ivanov
Telerik team
answered on 03 Jan 2013, 01:13 PM
Hi Totoro,

and Happy New Year to you too.

Could you tell us what device you have deployed your application on?

"window.plugins.childBrowser.showWebPage()" and "window.href=''" should work fine for iOS devices
but for android devices you need to use "window.plugins.childBrowser.openExternal()".

Bear in mind that plugins should work for Android devices and for provisioned iOS devices. Cordova plugins are currently not supported in Simulator and Ion app.

All the best,
Ivan 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
Relez
Top achievements
Rank 1
answered on 28 Feb 2013, 02:41 PM
Hello Ivan, I am using your example at Github for test the ChildBrowser plugin, I would like to use it in an Samsung Galaxy S3 to show a PDF file, but It didnt show it.
I can see web pages but when I enter an URL containing a PDF File it goes blank.

Any idea for that?

Thanks!
0
Jordan
Telerik team
answered on 06 Mar 2013, 07:41 AM
Hello Relvis,

Do you have installed Adobe Reader for Android? Also have in mind that on Android embedding PDF files with application is not yet supported you can only download from internet.

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
Raul
Top achievements
Rank 1
answered on 03 Dec 2013, 05:22 AM
Can someone please review the code below. That is the html code I am trying to use for my app project. I have added the ChildBrowser plugin but am still lost on how to get the PDFs listed on the attached document to open on my phone. Any help would be much appreciated!


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

        <script src="scripts/login.js"></script>
        <script src="scripts/location.js"></script>
        <script src="scripts/weather.js"></script>
        <script src="scripts/app.js"></script>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
        <div data-role="view" id="button-home" data-title="Texas A&M San Antonio:School of Business">
            <div class="home head">&nbsp;</div>
            <a class="button selected-button" data-role="button" href="#button-home">Home</a>
            <a class="button" data-role="button" href="#admissions">Admissions</a>
            <a class="button" data-role="button" href="#degreeplans">Degree Plans</a>
            <a class="button" data-role="button" href="#links">Important Links</a>

            <ul data-role="listview" data-style="inset">
                <li>
                    <b>
                        <p align="center"style="color:darkred">School of Business</p>
                    </b>
                    <small>
                        <p align="center">The College of Business at Texas A&M University-San Antonio prepares students for a successful career in business or can enhance your job placement potential with a bachelor’s or master’s degree. The low student-to teacher ratio and experienced faculty provides for a more personal learning environment that is designed to help students succeed. Financial assistance and scholarship opportunities are available to students as well as seamless transfer plans prepared by the dedicated advisors. City-Base Campus is located in southeast San Antonio and offers bachelor’s degrees in accounting, computer information systems, finance, management and marketing. Master of Business Administration (MBA) and Professional Accounting (MPA) are also available. Its evening and Saturday classes are designed to fit the schedule of working professionals at the lowest university tuition rates in San Antonio.</p>
                    </small>
                </li>
            </ul>
        </div>

        <div data-role="view" id="admissions" data-title="Admissions">
            <div class="admissions head">&nbsp;</div>
            <a class="button" data-role="button" href="#button-home">Home</a>
            <a class="button selected-button" data-role="admissions" href="#admissions">Admissions</a>
            <a class="button" data-role="button" href="#degreeplans">Degree Plans</a>
            <a class="button" data-role="button" href="#links">Important Links</a>
            <ul data-role="listview" data-style="inset">
                <li><a align="left" href="https://www.applytexas.org/adappc/gen/c_start.WBX"><b>Apply Texas (New Students)</b></a></li>
                <li><a align="left" href="http://www.fafsa.ed.gov/"><b>Apply for Financial Aid</b></a></li>
                <li><a align="left" href="http://www.tamusa.tamus.edu/scholarships/index.html"><b>Scholarships</b></a></li>
                <li><a align="left" href="http://www.tamusa.tamus.edu/SBS/StudentAccountsAndBilling/TuitionAndFeeSchedule.html"><b>Tuition and Fees</b></a></li>
                <li><a align="left" href="http://www.tamusa.tamus.edu/SBS/ImportantDates.html"><b>Important Dates</b></a></li>
            </ul>

        </div>

        <div data-role="view" id="degreeplans" data-title="Degree Plans">
            <div class="degreeplans head">&nbsp;</div>
            <a class="button" data-role="button" href="#button-home">Home</a>
            <a class="button" data-role="button" href="#admissions">Admissions</a>
            <a class="button selected-button" data-role="degreeplans" href="#degreeplans">Degree Plans</a>
            <a class="button" data-role="button" href="#links">Important Links</a>
            <ul data-role="listview" data-style="inset">
                <li align="center">
                    <h2>Undergraduate Programs</h2>
                </li>
                <li align="center"><b style="color:darkred">(BBA) Bachelor of Business Administration Degrees</b></li>
                <li><a align="center" var ref="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555178864907-10.100.20.116.pdf">Bachelor of Business Administration Accounting</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555409655019-10.100.20.116.pdf">Bachelor of Business Administration CIS-Enterprise Resource Planning concentration</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555600756107-10.100.20.116.pdf">Bachelor of Business Administration CIS-Information Assurance & Security concentration</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555709666539-10.100.20.116.pdf">Bachelor of Business Administration CIS-Project Management concentration</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555351996555-10.100.20.116.pdf">Bachelor of Business Administration Computer Information Systems</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077555936081483-10.100.20.116.pdf">Bachelor of Business Administration Finance</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077556107963083-10.100.20.116.pdf">Bachelor of Business Administration General Business</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077556187028619-10.100.20.116.pdf">Bachelor of Business Administration International Management </a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077556294532747-10.100.20.116.pdf">Bachelor of Business Administration Management</a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077556418600011-10.100.20.116.pdf">Bachelor of Business Administration Management-Human Resources concentration </a></li>
                <li><a align="center" href="http://www.tamusa.tamus.edu/uploadFilE/folders/k00252411/Pdf/Pdf-635077556493915403-10.100.20.116.pdf">Bachelor of Business Administration Management-Supply Chain concentration</a></li>
                <li><a align="center" href="styles/images/BBA-Marketing.PNG">Bachelor of Business Administration Marketing</a></li>
                <li></li><li align="center"><b style="color:darkred">(BS) Bachelor of Science Degrees</b></li>
                <li><a href=""align="center">Bachelor of Science in Computer Science</a></li>
                <li align="center"><b style="color:darkred">(BAAS) Bachelor of Applied Arts and Science Degrees</b></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science Business Emphasis</a></li>
                <li><a href="" align="center">Bachelor of Applied Arts & Science Fire & Emergency Services Administration</a></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science Information Technology (IT) Emphasis</a></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science IT with Enterprise Resource Planning</a></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science IT wtih Information Assurance & Security</a></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science IT with Project Management Concentration</a></li>
                <li align="center"><b style="color:darkred">Transfer Plans</b></li>
                <li align="center"><b style="color:darkred">General (BBA) Bachelor of Business Administration Transfer Plans</b></li>
                <li><a href="" align="center">Bachelor of Business Administration-Computer Information Systems</a></li>
                <li><a href=""align="center">Bachelor of Business Administration-Computer Information Systems w/ Enterprise Resource Planning Concentration</a></li>
                <li><a href=""align="center">Bachelor of Business Administration-Computer Information Systems w/ Information Assurance and Security Concentration</a></li>
                <li><a href=""align="center">Bachelor of Business Administration-Computer Information Systems w/ Project Managconcement Concentrat ion</a></li>
                <li align="center"><b style="color:darkred">General (BAAS) Bachelor of Applied Arts and Science Degrees</b></li>
                <li><a href=""align="center">Bachelor of Applied Arts and Sciences-IT Emphasis/Security</a></li>
                <li><a href=""align="center">Bachelor of Applied Arts & Science Business Emphasis</a></li>
                <li align="center"><b style="color:darkred">Alamo Colleges</b></li>
                <li><a href=""align="center">Bachelor of Applied Arts and Sciences IT Emphasis/Security(AAS Information Security & Assurance)</a>
                </li><li align="center"><b style="color:darkred">St. Phillip's College</b></li>
                <li><a href=""align="center">Bachelor of Applied Arts and Sciences-Information Assurance and Security(AAS Biomedical Engineering Technology)</a></li>
                <li align="center"><b style="color:darkred">Laredo Community College</b></li>
                <li><a href=""align="center">Bachelor of Applied Arts and Science IT Emphasis with Security(AAS) Computer Information Systems with Network and Cyber Security Technology)</a></li>
                <li align="center"><h2>Grdauate Programs</h2></li>
                <li align="center"><b style="color:darkred">(BBA) Bachelor of Business Administration Degrees</b></li>
                <li><a align="center" href="">Master of Business Administration</a></li>
                <li><a align="center" href="">Master of Professional Accounting</a></li>
          </ul>
        </div>

        <div data-role="view" id="links" data-title="Links">
            <div class="links head">&nbsp;</div>
            <a class="button" data-role="button" href="#button-home">Home</a>
            <a class="button" data-role="button" href="#admissions">Admissions</a>
            <a class="button" data-role="button" href="#degreeplans">Degree Plans</a>
            <a class="button selected-button" data-role="button" href="#links">Important Links</a>

            <ul data-role="listview" data-style="inset">
                <li>
                    <a href="http://www.tamusa.tamus.edu/jaguarconnect/index.html"style="color:darkred">Jaguar Connect</a>
                </li>
                <li>
                    <a href="https://login.microsoftonline.com/login.srf?wa=wsignin1.0&rpsnv=2&ct=1385594221&rver=6.1.6206.0&wp=MBI_KEY&wreply=https:%2F%2Fwww.outlook.com%2Fowa%2F&id=260563&whr=jaguar.tamu.edu&CBCXT=out"style="color:darkred">Student Email</a>
                </li>
                <li>
                    <a href="https://www.facebook.com/TAMUSABusiness"style="color:blue">College of Business Facebook Page</a>
                </li>
                <li>
                    <a href="http://www.tamusa.tamus.edu/collegeofbusiness/facultystaff.html"style="color:darkred">College of Business Faculty and Staff</a>
                </li>
            </ul>
        </div>

        <style scoped>
            .button
            {
                margin-left: .1em;
                text-align: center;
            }
            .km-root .selected-button
            {
                color: #8A0000;
                background-color: #000000;
            }
            /* solid filled buttons in iOS7 should override the border-color */
            .km-ios7 .selected-button
            {
                border-color: transparent;
            }
            .button:first-of-type
            {
                margin-left: .2em;
            }
            .home
            {
                background: url(http://lospadrespreguntan.files.wordpress.com/2011/08/new_logo.jpg) no-repeat center center;
            }
            .admissions
            {
                background: url(http://www.tamusa.tamus.edu/uploadFile/folders/jduran17/Image/Image-635065474397032487-10.100.20.116.jpg) no-repeat center center; 
            }
            .degreeplans
            {
                background: url(http://www.veranocommunity.com/wp-content/uploads/2012/08/Image-634799414258748037-10.100.20.115.jpg) no-repeat center center; 
            }
            .links
            {
                background: url(http://therivardreport.com/wp-content/uploads/2012/05/AMview.jpg) no-repeat center center; 
            }
            #button-home .head,
            #admissions .head,
            #degreeplans .head,
            #links .head
            {
                display: block;
                margin: .01em;
                height: 180px;
                -webkit-background-size: 100% auto;
                background-size: 100% auto;
            }
            .km-ios .head,
            .km-blackberry .head
            {
                -webkit-border-radius: 10px;
                border-radius: 10px;
            }
        </style>

        <script>
            $("#home-link").kendoMobileButton();
        </script>

        <script>
            var app = new kendo.mobile.Application(document.body);
        </script>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="Plugins/Child Browser/childbrowser.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/main.js"></script>
    </body>
</html>

0
Steve
Telerik team
answered on 03 Dec 2013, 05:13 PM
Hi Raul,

We already have a sample project that shows you how to open PDF files, please clone it directly from your Icenium IDE of choice.

Regards,
Steve
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.
0
Raul
Top achievements
Rank 1
answered on 03 Dec 2013, 08:29 PM
I apologize for not understanding, as this is all new to me, but when you say clone it directly what do you mean? I did pull the sample project that you are referring to and attempted to add it to my app. How would I do that since it appears I am doing something completely wrong. I am trying to use a Kendo UI script for my base and building off of that. When pulling the sample you are referring to what would I do?

Thanks for the response by the way, your assistance is greatly appreciated!
0
Zdravko
Telerik team
answered on 04 Dec 2013, 04:32 PM
Hi Raul,

ChildBrowser plugin is deprecated from Cordova version 3.0, so it cannot be used, the valid approach is shown in the sample project that my colleague referenced.

Just follow the steps described here to clone 'File Open PDF' project. You can copy/paste markup and code from any sample to your own project.

Regards,
Zdravko
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.
0
Anand
Top achievements
Rank 1
answered on 19 Feb 2014, 01:17 AM
Hi,
I tried to use the sample open PDF and it does work very well with Android and iPhone. But as soon as i add the scripts dependency for KendoUI Mobile and JQuery Mobile, it stops working. Also one more thing that i found is that there is a '#' character added in the path after i start using these dependencies. I am not sure what to do. Any help will be appreciated.

(I am using App builder windows client for development)
0
Zdravko
Telerik team
answered on 21 Feb 2014, 01:25 PM
Hello Anand,

Thanks for contacting us.
Currently we have some sample projects like KendoUI project template that we offer in our IDE where both scripts are well integrated. They are well functioning and I suspect there is something in you project that could cause such misbehavior.

Would you send us you project name so we could take a look at it?

Further clarification like a screenshot about the "#" character and its location will be appreciated.

I look forward to hearing from you.

Regards,
Zdravko
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Anand
Top achievements
Rank 1
answered on 22 Feb 2014, 02:13 AM
Zdravko,
I am using app builder in telerik platform. I cannot write the name of my project in the forum. Can you send me your email address where i can send you the information?

Regards,

Anand
0
Zdravko
Telerik team
answered on 26 Feb 2014, 01:47 PM
Hello Anand,

Please use this link in order to open a private ticket and post the required information there.

Before that I just want to share with you what could be at fault for '#' character added in the path.
If you use the code provided in our sample app:
Application.prototype.getWorkingFolder = function() {
    var path = window.location.href.replace('index.html', '');
    return path;
}

you will notice that we take the location link and remove page name addition. However, if you use KendoUI or JQuery mobile the link provided from the browser is a bit different and that is the reason for the "#" char left.
If this is your case there are many different ways to remove everything left after the replacement of the main page name and will be glad to assist you with if you need so.
Thanks.

Regards,
Zdravko
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Anand
Top achievements
Rank 1
answered on 26 Feb 2014, 09:52 PM
Zdravko,
Thanks for your help. I did open a private ticket for help. I am getting the required support.

Regards,

Anand
Tags
HTML5, CSS, JavaScript
Asked by
totoro
Top achievements
Rank 1
Answers by
Ivan Ivanov
Telerik team
totoro
Top achievements
Rank 1
Relez
Top achievements
Rank 1
Jordan
Telerik team
Raul
Top achievements
Rank 1
Steve
Telerik team
Zdravko
Telerik team
Anand
Top achievements
Rank 1
Share this question
or