DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Virtual Reality and Augmented Reality in the Browser
  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • What Is Coding in Web Development?
  • A Beginner’s Guide to Automated Cross-Browser Compatibility Testing

Trending

  • Debugging Tips and Tricks: A Comprehensive Guide
  • Automate Migration Assessment With XML Linter
  • Common Problems in Redux With React Native
  • Hugging Face Is the New GitHub for LLMs
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Write an HTML to PDF App for Android/iOS Using Cordova

How to Write an HTML to PDF App for Android/iOS Using Cordova

Learn how to install and use this plugin for Cordova, which will allow you to generate reports in PDF format without complicating things with a server-side API.

Cesar Valdez user avatar by
Cesar Valdez
·
Dec. 07, 17 · Tutorial
Like (10)
Save
Tweet
Share
21.82K Views

Join the DZone community and get the full member experience.

Join For Free

Some of my day-to-day work is to design and develop hybrid mobile/desktop applications using Apache Cordova and Node.JS. One of the typical challenges I face when working with customers is how to generate reports or other documentation in PDF format. The usual way to solve this was to use a server-side API, render the document there, and send it to the phone. This is far from good, the first reason being that you need network connectivity for this to work, the second being the lack of good and free PDF APIs on the server side, so I decided to write a plugin to move this job to the mobile device. The advantages of doing this are:

  • You can use this functionality offline.

  • The user has more control over the experience.

  • You can share the document across apps (Print, Email, Cloud Storage, etc...).

  • Offloading tasks from the servers.

How It Works

So basically, to make this, I wanted to use HTML/CSS as the template engine, so you can use these familiar markup languages to define how your PDF is going to look, then load the content via network or local to an offscreen Webkit object both in Android or iOS, then just render the content to a PDF file.

Getting Started

Assuming you have installed the latest version of Cordova, let's try to write a simple example for both platforms.

cordova create hello-pdf      # this will create a new cordova project

# initializing mobile platforms
cd ./hello-pdf/
cordova platform add ios      # Make sure you installed XCode
cordova platform add android  # Make sure you have Android Studio

# installing the plugin
cordova plugin add cordova-pdf-generator

Now we need to do some coding to create our PDF. To start, we need to use our favorite editor to open the JavaScript entry file located in ./hello-pdf/www/index.js. The content should be something similar to this:

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();


We need to edit the function receivedEvent; this function will be called after Cordova is done initializing the framework, so it's the place where we should place our code.

var app = {
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement  = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        // Our code start here
        var opts = {
            type: "share",         //Open a context menu and ask the user what to do next (print, mail, etc..).
            fileName: 'v8-tutorial.pdf' //it will use this filename as a place-holder
        }

        pdf.fromURL('https://cesarvr.io/post/2015-11-20-javascript-v8/', opts)
        .then((status) => console.log('success->', status))
        .catch((error) => console.log(error));
  // It end here

        console.log('Received Event: ' + id);
    }
};

app.initialize();


Now its time to run deploy our code in the device of our choice:

#put our www/ folder inside our target platform.
cordova prepare 

#Deploy in Android.
cordova run android

#Deploy in iOS.
cordova run ios


Image title

Above: Android.

Image title

Above: iOS. 

We should see our beautiful PDF being generated for us. In this example, I use a external web as my template, and as you can see, I used the option {type: 'share'} to the plugin; this means it will pop up a contextual menu with some helpful options. This is a good choice if you want your app to integrate with the OS ecosystem, or to give the option for the user to have full control over the experience, which is important because it gives the user flexibility.

If you just want to have control over the document, you can use the option {type: 'base64'}. This will transform it to a base64 string that you can upload to a server, encrypt, or display using your own library.

Conclusion

I hope this plugin helps to simplify this task, and maybe helps in moving some server load to the phone.

If you need more info, you can find it in the documentation; also, you can access this demo with more use cases, like loading files from the phone file system, etc.

Also, this project is open source, so if you want to contribute, here is the GitHub repository.

PDF Apache Cordova HTML mobile app

Published at DZone with permission of Cesar Valdez, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Virtual Reality and Augmented Reality in the Browser
  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • What Is Coding in Web Development?
  • A Beginner’s Guide to Automated Cross-Browser Compatibility Testing

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: