How to Create PDF Files with Ionic using PDFMake [v3]

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.

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.

Comments on How to Create PDF Files with Ionic using PDFMake [v3]

  1. Rijwan Mohmmed says:

    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));

    }

  2. Marcel Nogueira d' Eurydice says:

    I am confused how an image can be included in the pdf.
    Any hints? Lets say I want to insert an image from the assets folder.

    Cheers

    1. Alberto says:

      Yes, check this http://pdfmake.org/playground.html section Image.

  3. Bhavendra says:

    how can we use Gujarati language in PDF

  4. Anes P.A says:

    For me after operation show pdf file open and suddenly it closes without see any thing. Why this ? Where can find the pdf file ?

    1. vicky prasad says:

      path of the pdf:
      file:///data/user/0/io.ionic.starter/files/
      ie. : C:datauserio.ionic.starterfiles

  5. Samridhi Monga says:

    great work sir, does this only work on browser? because i tried implementing it on device but it is throwing an exception. please help

  6. krupali says:

    @ionic/cli-utils : 1.19.2
    ionic (Ionic CLI) : 3.20.0

    global packages:

    cordova (Cordova CLI) : 8.0.0

    local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms : none
    Ionic Framework : ionic-angular 3.9.2

    please help me
    not generate pdf in mobile

  7. vicky prasad says:

    The pdf file is not stored in “this.file.dataDirectory”. The file path folder remains empty, but pdf is shown in mobile and can be downloaded. I don’t know why it doesn’t save the file in the directory.

  8. Bruno Collaço says:

    is it possible to insert an image from the assets folder?

  9. Alberto says:

    The file is created empty. Please help

  10. Alberto says:

    The pdf is created empty

  11. Rafael Alíx says:

    How about if you are using formBuilder

  12. mcuculj says:

    When running from safari on iOS the downloadPdf() creates nice PDF, everything is OK. But if I add the app on home screen that function gives me the blank white screen. On android devices everything is OK. Can I force app somehow to open created PDF in safari? (I dont want to build app for iOS or Android, I just want to run it as fullscreen stand alone web app)

  13. Maldonado Net says:

    if I want to show pdf that I have in the assets / pdf folder only?

  14. Hi,
    I have tried your solution. But it is not working. This is the error.

    core.js:1350 ERROR Error: Uncaught (in promise): [object Object]
    at c (polyfills.js:3)
    at polyfills.js:3
    at rejected (assessment-report.module.ts:13)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)

    You can see the stackoverflow link here: https://stackoverflow.com/questions/53170314/error-uncaught-in-promise-object-object-with-ionic-native-file-plugin

  15. Felipe Augusto says:

    My this.file.writeFile not work, can you help me ?

Leave a Reply

Your email address will not be published.