How to Create PDF Files with Ionic using PDFMake

ionic-pdf-header

Creating a PDF file that can be saved, printed or shared by your users can be a great addition inside your Ionic App. And actually it’s more easy than you might think using a few helping tools.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

Inside this Quick Win we will create a PDF file using the PDFMake library, which is one of a few awesome libraries for creating PDF files. For the web, this is already enough but to get everything working inside our Ionic app we need a few more Cordova plugins so follow along to build your own PDF Creator with Ionic!

Starting our PDF App

We start with a blank new app and install two Cordova Plugins to save a File and also to open a PDF using the native viewer for PDFs. Also, we install the according Ionic Native packages plus the before mentioned PDFMake library using NPM.

Once your installation is finished, head over to your src/app.module.ts and add our two Plugins like this:

That’s all you need to create your own beautiful PDF!

Create the View

We want to make all of this a bit more dynamic so we will add some input fields that will be displayed inside our PDF later. In our case this is very dummy like, but of course you could craft a nice form to gather all the data which can then be transformed into a PDF.

Below our inputs we add buttons to trigger the actions of creating a new PDF and also displaying (or downloading) it. Go ahead and open your src/pages/home/home.html and insert:

We could also add another canvas element to display a preview of the PDF but we keep it to the basic but good looking tools.

Create PDFs, Store Files and Display the Viewer

Now the actual fun begins. Inside our class we need to craft a new element following a special syntax which can be passed to the PDF library. You can find out more on the different syntax options inside the PDFMake documentation!

There’s a lot you can do to build great PDFs and we use a few of the options to build a tiny letter with some texts and additional styling where we use the input values of our view.

Finally we need to call createPdf() with the before created definition and our PDF is more or less ready!

At this point we store the reference inside a variable to perform the download action inside a separate function. Of course you could also do all of this simply inside one functions as all of this is synchronous code.

If you want to download the file within a web browser, all we have to do is call the download() function of the library which handles the rest for us.

But if we run this code on a device this won’t work, therefore we need to store our file locally and then open it.

This process is a bit tricky but works with a few lines of code:

  • Get a Buffer object of our PDF file
  • Do some conversion to transform it into a Blob object
  • Save the Blob using the Cordova File Plugin
  • Open the saved File inside the Native File Opener using the correct path

Transforming these words into code, your src/pages/home/home.ts should now look like this:

Once you hit “Create PDF” the PDF will be created and is now ready to be displayed. With the second function we can save the PDF file on our device and display it nicely like in the image below.

Note: By using the native file opener we also get the benefit of directly sharing this file using your email or anything else!

ionic-pdf-preview

As you can see, actually it’s pretty straight forward to create your own PDF using Ionic and PDFMake. You can add tables, more styling and more dynamic data to build really helpful PDFs that can be viewed and shared by your users directly from their Ionic app!

You can also find a video version of this Quick Win below.

  • Rijwan Mohmmed

    how to open the pdf file which is store in assets folder of app

    here is my code can
    show(){
    const riju = ${cordova.file.applicationDirectory}www/assets/imgs/1.pdf;
    this.fileOpener.open(riju, ‘application/pdf’)
    .then(() => console.log(‘File is opened’))
    .catch(e => console.log(‘Error openening file’, e));

    }