If you are using jsPDF, you can think your multipage download PDF function like in below snippets -

downloadPDF() {
    const htmlWidth = document.getElementById('idcard_main').offsetWidth;
    const htmlHeight =  document.getElementById('idcard_main').offsetHeight;

    const topLeftMargin = 15;

    let pdfWidth = htmlWidth + (topLeftMargin * 2);
    let pdfHeight = (pdfWidth * 1.5) + (topLeftMargin * 2);

    const canvasImageWidth = htmlWidth;
    const canvasImageHeight = htmlHeight;

    const totalPDFPages = Math.ceil(htmlHeight / pdfHeight) - 1;

    const data = document.getElementById('idcard_main');
    html2canvas(data, { allowTaint: true }).then(canvas => {

      canvas.getContext('2d');
      const imgData = canvas.toDataURL("image/jpeg", 1.0);
      let pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);
      pdf.addImage(imgData, 'png', topLeftMargin, topLeftMargin, canvasImageWidth, canvasImageHeight);

      for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage([pdfWidth, pdfHeight], 'p');
        pdf.addImage(imgData, 'png', topLeftMargin, - (pdfHeight * i) + (topLeftMargin * 4), canvasImageWidth, canvasImageHeight);
      }

      pdf.save(`Document ${new Date().toLocaleString()}.pdf`);
    });
  }
Answer from Shalim Ahmed on Stack Overflow
๐ŸŒ
Medium
medium.com โ€บ @berkayyyulguel โ€บ angular-convert-html-to-pdf-via-jspdf-8c63c8c61ad9
Converting HTML documents to PDF using jsPDF and Angular | by Berkay รœlgรผel | Medium
May 10, 2022 - Div with page class attached, represents single page content, you can multiply those pages with ngFor. ... Query selector allows us to get HTMLElement which has an all-pages class name.
๐ŸŒ
Stack Overflow
stackoverflow.com โ€บ questions โ€บ 54942979 โ€บ create-multiple-page-pdf-in-angular
Create multiple page PDF in angular - Stack Overflow
<!-- pdf.component.html --> <div [id]="'pdf'+i" *ngFor="let item of items; index as i"> <h1>{{ item.title }}</h1> <!-- the content of one page here --> </div> <button (click)="downloadPDF()"> generatePDF </button> Note: Exporting to much files broke the browser and give you an "Debuggin connection was closed, Reason: Render process gone."
๐ŸŒ
Morioh
morioh.com โ€บ p โ€บ 039847bdbe64
How To Convert HTML Page To PDF In Angular 11?
In this tutorial, you and I learn how to convert HTML pages to pdf in angular 11. how to implement an Angular 11 generate pdf from HTML.
๐ŸŒ
Telerik
telerik.com โ€บ components โ€บ pdf export โ€บ multi-page content
Angular PDF Export Multi-Page Content - Kendo UI for Angular
The PDF Export component provides options for generating multi-page content in PDF, preventing the page-split, and rendering page templates. ... Manually specify page breaks using the forcePageBreak CSS selector property. ... Enable automatic page break insertion by setting the paperSize option.
๐ŸŒ
Stack Overflow
stackoverflow.com โ€บ questions โ€บ 78953087 โ€บ create-multiple-pages-pdf-using-html-css-div-angular-16
typescript - Create Multiple Pages PDF using HTML/CSS div (Angular 16) - Stack Overflow
Generate pdf from HTML in div using Javascript ยท 280 ยท Create component & add it to a specific module with Angular-CLI ยท 52 ยท How to generate a PDF using Angular 7? 3 ยท Create multiple page PDF in angular ยท 0 ยท Add div on every page (ngx-extended-pdf-viewer) 3 ยท
๐ŸŒ
Telerik
telerik.com โ€บ kendo-angular-ui โ€บ pdf-export
Angular PDF Export Component | Kendo UI for Angular
The Kendo UI for Angular PDF Export component allows for developers to export any HTML page as a PDF file, including entire HTML documents or just portions of the page โ€“ all on the client-side.
Find elsewhere
๐ŸŒ
Readerstacks
readerstacks.com โ€บ home โ€บ multiple ways to convert html to pdf in angular ?
Multiple Ways to Convert Html to PDF in Angular ? - ReaderStacks
November 5, 2023 - import { Component, ElementRef, ViewChild,OnInit } from '@angular/core'; import domtoimage from 'dom-to-image'; import jsPDF from 'jspdf'; @Component({ selector: 'app-html-to-pdf-make', templateUrl: './html-to-pdf-make.component.html', styleUrls: ['./html-to-pdf-make.component.css'] }) export class HtmlToPdfMakeComponent implements OnInit { constructor() { } ngOnInit(): void { } @ViewChild('pdfTable') pdfTable!: ElementRef; public downloadAsPDF2() { // const pdfTable = this.pdfTable.nativeElement; // var html = htmlToPdfmake(pdfTable.innerHTML); // const documentDefinition = { content: html };
Top answer
1 of 7
36

Best possible solution I could come up with till now.

You would have to install the below packages from npm

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}

UPDATE:

Came up with another solution. I wasn't able to break it down into A4 size pages, but I was able to make a single pdf file.

Packages:

dom-to-image

jspdf

import domtoimage from 'dom-to-image';
import * as jsPDF from 'jspdf';



            downloadPDF()
            {

              var node = document.getElementById('parentdiv');

              var img;
              var filename;
              var newImage;


              domtoimage.toPng(node, { bgcolor: '#fff' })

                .then(function(dataUrl) {

                  img = new Image();
                  img.src = dataUrl;
                  newImage = img.src;

                  img.onload = function(){

                  var pdfWidth = img.width;
                  var pdfHeight = img.height;

                    // FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image

                    var doc;

                    if(pdfWidth > pdfHeight)
                    {
                      doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
                    }
                    else
                    {
                      doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
                    }


                    var width = doc.internal.pageSize.getWidth();
                    var height = doc.internal.pageSize.getHeight();


                    doc.addImage(newImage, 'PNG',  10, 10, width, height);
                    filename = 'mypdf_' + '.pdf';
                    doc.save(filename);

                  };


                })
                .catch(function(error) {

                 // Error Handling

                });



            }
2 of 7
10

The following code was used and worked for my project

Step 1 : Run following commands to install npm packages

> npm install jspdf
> npm install html2canvas

Step 2: Import installed packages in app.components.ts. I haven't imported those packages in constructor()

> import * as jspdf from 'jspdf';
> import html2canvas from 'html2canvas';

Step 3: Give an id for the HTML div that has to be exported as PDF. Add a button that activates the function too.

<div id="MyDIv" style="margin-left: 45px;" class="main-container">

</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>

Step 4 : Write the code for generating PDF as follows

exportAsPDF(div_id)
  {
    let data = document.getElementById(div_id);  
    html2canvas(data).then(canvas => {
      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
      // let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
      pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
      pdf.save('Filename.pdf');   
    }); 
  }
๐ŸŒ
Freakyjolly
freakyjolly.com โ€บ home โ€บ angular โ€“ convert multiple html sections into single pdf file
Angular - Convert Multiple HTML Sections into Single PDF File
September 29, 2023 - import { Component } from '@angular/core'; import { PdfService } from './pdf.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private pdfService: PdfService) {} downloadPdf() { this.pdfService.generatePdf(); } } Create an HTML template in the app.component.html file: <button (click)="downloadPdf()">Download as PDF</button> <div class="pages"> <div id="page-1" class="page"> <h1>1: Page 1 Heading- FreakyJolly.com</h1> <p>Page 1 sample paragraph.</p> <img src="../assets/fj-logo.png" alt
๐ŸŒ
Nutrient
nutrient.io โ€บ blog โ€บ sdk โ€บ how to generate pdfs using angular
Generating PDFs in Angular with jsPDF and Nutrient Web SDK
July 16, 2025 - This JavaScript library is designed for generating and manipulating PDF documents in Angular-based web applications. Nutrient Web SDK offers a wide range of capabilities, making it a powerful tool for your PDF needs: Create from template โ€” Insert text or images and prefill forms. Generate from images โ€” Convert JPGs, PNGs, or TIFFs into PDF. Assemble documents โ€” Merge multiple PDFs and insert pages.
๐ŸŒ
DevHide
devhide.com โ€บ how-can-i-use-jspdf-to-render-multiple-pagination-results-html-to-pdf-66774374
How can I use jsPDF to render multiple pagination results (HTML to PDF) on angular, jspdf, ngx-pagination | DevHide
1 month ago - async printReceipt() { console.log('getting the number of pages in the pagination'); var lenArr = new Array(Math.ceil(this.receiptItems.length / 10)); var doc = new jsPDF('p', 'pt', [496, 702]); var arrayBuffer: ArrayBuffer[] = []; var fileURL; console.log('creatting main doc'); for (let index = 0; index < lenArr.length; index++) { console.log('Changing pagination to:', index + 1); this.page = index + 1; console.log('Converting page:', index + 1); await new Promise<void>(async (resolve, reject) => { doc.html(document.getElementById('receipt'), { callback: async (res) => { console.log('Adding page to buffer, page:', index + 1); arrayBuffer.push(res.output('arraybuffer')); if (lenArr.length - 1 == index) { console.log('Printing'); await this.mergePdfs(arrayBuffer); } resolve(); }, }); }); } }
Top answer
1 of 8
41

You can use jspdf.

working Demo

.html

<div id="pdfTable" #pdfTable>
  <h1>{{name}}</h1>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
   </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

<div> <button  (click)="downloadAsPDF()">Export To PDF</button></div>

.ts

  public downloadAsPDF() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('tableToPdf.pdf');
  }
2 of 8
25

You need to display the contents to be printed within a DIV. After displaying the contents, use the following code which was used and worked for my project

Step 1 :

Run following commands to install npm packages

> npm install jspdf
> npm install html2canvas

Step 2:

Import installed packages in app.components.ts. I haven't imported those packages in constructor()

> import * as jspdf from 'jspdf';
> import html2canvas from 'html2canvas';

Step 3:

Give an id for the HTML div that has to be exported as PDF. Add a button that activates the function too.

<div id="MyDIv" style="margin-left: 45px;" class="main-container">
        
</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>

Step 4 :

call the code for generating PDF as follows

    exportAsPDF(divId)
    {
        let data = document.getElementById('divId');  
        html2canvas(data).then(canvas => {
        const contentDataURL = canvas.toDataURL('image/png')  // 'image/jpeg' for lower quality output.
        let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
        // let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
        pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
        pdf.save('Filename.pdf');   
      }); 
    }
๐ŸŒ
Ionic Framework
forum.ionicframework.com โ€บ ionic framework โ€บ ionic-v3
How to convert HTML to PDF with multiple pages - ionic-v3 - Ionic Forum
April 19, 2019 - I am trying to convert HTML div elementโ€™s content to PDF using ionic3 Angular 4. I have tried using PDFmake(), jspdf() and html2canvas plugins. None of these working for mutliple page generation. Below is an example using PDFmake() with html2canvas plugin. The below code generates pdf with ...
๐ŸŒ
ItSolutionstuff
itsolutionstuff.com โ€บ post โ€บ how-to-convert-html-into-pdf-in-angular-11example.html
How to Convert HTML into PDF in Angular 11? - ItSolutionstuff.com
October 20, 2023 - we will use pdfmake, html-to-pdfmake and jspdf package for generate pdf file from html view in angular app.
๐ŸŒ
Cloudhadoop
cloudhadoop.com โ€บ home
How to Export/Generate HTML to pdf in javascript web application
December 31, 2023 - $("#exportButton").click(function () { convertPdf(); }); var doc = new jsPDF(); function convertPdf() { html2canvas($("#print-container")[0], { onrendered: function (canvas) { var imgWidth = 208; var pageHeight = 295; var imgHeight = (canvas.height * imgWidth) / canvas.width; var img = canvas.toDataURL("image/png"); var doc = new jspdf("p", "mm", "a4"); // A4 size page of PDF doc.addImage(img, "PNG", 0, 0, imgWidth, imgHeight); doc.save("test.pdf"); }, }); } When export button is clicked, using jquery we called convertPDF javascript method. JsPDF is the class used. syntax is ... As we have seen an example using plain Javascript. The angular framework is based on typescript language. We have to do some configuration angular CLI apart from HTML/typescript component code.