Ionic 5 Capacitor and PDF library

What is Ionic?

Ionic is a powerful open-source framework for building high-performance, modern mobile applications using familiar web technologies such as HTML, CSS, and JavaScript. Rich in prebuilt UI components, with easy integration with frameworks like Angular, React, and Vue, Ionic enables developers to build cross-platform, visually attractive apps from one code base.

Incorporating a Capacitor in your Ionic app will get you working with device-specific functions such as the camera, GPS, and storage, easily fitting it for hybrid mobile development and Progressive Web Apps. Whether you build for Android or iOS, or the web, Ionic represents the flexibility and the tools to deliver fast, consistent, user-friendly applications.

Features of Ionic

Cross-platform development

Ionic allows developers to create applications for Android devices, iOS, and the web with just one codebase. Since the work has to be done only once, it cuts down on development time. Further, this reduces the cost, making maintenance easier, too, since updates and bug fixes need to be implemented only once. In fact, Ionic's hybrid approach to targeting multiple platforms makes things a lot easier with less effort.

Built Using Web Technologies

Ionic follows standard web technologies like HTML, CSS, and JavaScript. Therefore, it's more friendly for web developers to enter the mobile app development space. It means that you don't need to learn native languages like Java, Swift, or Kotlin. Therefore, Ionic is quite accessible and friendly.

Rich Collection of UI Components

At the framework's core is an extremely powerful set of prebuilt UI components for mobile-optimized design patterns, including buttons, tabs, lists, modals, side menus, and navigation that allow developers to create visually appealing, responsive interfaces without having to start from scratch.

Integration with Popular Front-end Frameworks

Ionic easily integrates with the most popular frameworks, including Angular, React, and Vue. This level of flexibility will enable developers to choose an ecosystem that best fits their needs and gives them immediate access to powerful tools, patterns, and architecture out of the box when building mobile applications.

Native Functionality Through Capacitor

Ionic leverages Capacitor, the modern native runtime that provides application developers with an easy API-based access to native device features like the Camera, Geolocation, Filesystem, Notifications, and Sensors. This bridges the gap between web and native, empowering the app to act just like a native app but still be built with web technologies.

Install Ionic CLI

Follow below and enter the code on the command prompt. To use the code, we need Node.js to be installed on the machine.

npm install -g @ionic/cli

The code helps us download and install the Ionic CLI on the machine

Create a new Ionic + Angular project

ionic start NEWDEMO blank --type=angular

In this example, we are going to create a new web application using Ionic with Angular. This will create an Angular project on the given path.

Open the project and run it in the browser

cd myApp
ng serve

The above line of code allows us to set the path of the project and run the newly created Ionic Angular project

Project structure

src/app/ — Angular modules, components, pages, routing, assets.

src/index.html, src/styles.css — global styles.

ionic.config.json — Ionic config.

package.json — scripts/deps.

What is IronPDF?

The IronPDF Node.js Package is a powerful library for generating, editing, and converting PDFs. It grants software developers a wide range of programming-based PDF-related functionalities, allows working with already existing PDFs, and easily converts HTML into PDF. IronPDF is an efficient solution for applications requiring dynamic creation and processing of PDFs since it offers a flexible and easy way to generate professional-grade PDF documents.

Features of IronPDF

The following are some of the main features of IronPDF:

Convert HTML to PDF

IronPDF will convert your HTML file data into PDF documents. This allows beautifully styled PDF publications to be generated from web content using modern HTML5, CSS3, and JavaScript.

PDF Creation and Editing

IronPDF allows developers to generate new PDF documents programmatically by adding text, pictures, tables, and more. It also allows for opening and editing existing PDF documents. You can edit the content or add to the content of a PDF and remove specific sections.

Advanced Styling and Layout

Use CSS for styling the content in the user's browser in PDFs. This includes support for advanced layouts, fonts, colors, and other design elements. Render HTML material that can be used with JavaScript to make dynamic content in PDFs.

Install the IronPDF package

Install the required IronPDF packages in Node.js, which enables IronPDF functionality with the use of the Node Package Manager.

npm install @ironsoftware/ironpdf

Integrate IronPDF with Angular Ionic

Below is the sample node js api code, which helps us to create the PDF using IronPDF

const express = require('express');
const IronPdf = require("@ironsoftware/ironpdf");
var cors = require('cors')
const app = express();
app.use(cors());
    const options = IronPdf.IronPdfGlobalConfig.getConfig();
    // Set the license key for IronPDF
    options.licenseKey = "";
// Route to handle PDF generation
app.post('/generate-pdf', async (req, res) => {
  const data = req.body;
  // HTML content to be converted into PDF
  const htmlContent = `<h1>Hello, World1</h1>`;
  try {
    // Create an instance of IronPDF
    const document=IronPdf.PdfDocument;
    // Convert HTML to PDF
    const pdf = await document.fromHtml(htmlContent);
    // save the pdf as buffer
    let pdfbuff= await pdf.saveAsBuffer();
    // Set response headers to serve the PDF
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=generated.pdf');
    // Send the PDF as the response
    res.send(pdfbuff);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).send('Error generating PDF');
  }
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

When the above code is hit from the Iconic, it will create a PDF from the given HTML string content, and then it will convert the PDF into a buffer and send it to the Ionic application or any other application that calls the API function.

Below is the sample code from the Ionic Angular application

Home.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      PDF Creater
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">PDF Creater</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
<ion-button size="default" (click)="makePdf()">Create PDF</ion-button>
  </div>
</ion-content>

The above code allows us to create an Ionic button that allows us to trigger the make PDF function when the user clicks the button.

home.page.ts

import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent,IonButton } from '@ionic/angular/standalone';
import { default as axios } from 'axios';
import { Buffer } from 'buffer';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonHeader, IonToolbar, IonTitle, IonContent,IonButton],
})
export class HomePage {
  constructor() {}
  async makePdf () {
    axios.post('http://localhost:3000/generate-pdf',)
  .then(function (response) {
  const a = document.createElement('a');
  a.target = '_self';
  const fileName = 'Demo_Pdf.pdf';
  const blob = new Blob([Buffer.from(response.data)], { type: 'application/pdf' });
  const url= window.URL.createObjectURL(blob);
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  }).catch(function (error) {
    console.log(error);
  });
  }
}

The above typescript code shows that when the click event is triggered from the UI page, it will trigger the MakePDF function. This function helps us call the Node.js API with the help of the AXIOS library. API will generate the PDF file using the IronPDF library and send the PDF file in the HTTP response.

The typescript captures the HTTP response data and converts it into a blob using the blob class. Later, it can be converted or saved as a PDF using the createObjectURL function. This code allows us to download the PDF file and save it in the default file path.

Below is the PDF file generated from the above code.

Conclusion

In conclusion, the use of Ionic with IronPDF for Node.js helps modern applications requiring dynamic, high-quality PDF generation. While Ionic supplies the rapid, cross-platform mobile UI, IronPDF brings robust server-side PDF processing with precise HTML to PDF rendering, form handling, and document manipulation.

By using the Ionic framework as a frontend to a Node.js backend driven by IronPDF, developers can generate invoices, reports, receipts, and certificates with professional precision. In such an architecture, a mobile app remains lightweight but ensures secure, scalable, and reliable workflows for PDFs. All in all, Ionic and IronPDF create an effective ecosystem for building modern document-intensive mobile applications.

IronPDF is free for the developer and has a paid version for commercial purposes. To know more about the IronPDF licensing, check here. And to know more about the other IronSoftware product, check here.