I want to download my Angular (HTML) which is using primeng UI library by using any NPM PDF package but my requirement is like i want to download my DOM as an PDF also the PDF is searchable.
Most of the libraries download Dom as an image but i don’t want this solution.

Here is my Demo Code Which Downloads HTML Correctly But not applying CSS styles.

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { CardModule } from 'primeng/card';
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';

import { NgxPrintElementService, Config, NgxPrintElementModule } from 'ngx-print-element';
import { TagModule } from 'primeng/tag';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ButtonModule, TableModule, CardModule, NgxPrintElementModule, TagModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  // @ViewChild('pdfContent') pdfContent: any;
  @ViewChild('pdfContent', { static: true }) pdfContent!: any;
  @ViewChild('tableRef') tableElement: any;
  constructor(private renderer: Renderer2, public print: NgxPrintElementService) {
  }

  // Dummy Data
  products: any[] = [
    {
      id: '1000',
      code: 'f230fh0g3',
      name: 'Bamboo Watch',
      description: 'Product Description',
      image: 'bamboo-watch.jpg',
      price: 65,
      category: 'Accessories',
      quantity: 24,
      inventoryStatus: 'INSTOCK',
      rating: 5
    },
    {
      id: '1001',
      code: 'nvklal433',
      name: 'Black Watch',
      description: 'Product Description',
      image: 'black-watch.jpg',
      price: 72,
      category: 'Accessories',
      quantity: 61,
      inventoryStatus: 'OUTOFSTOCK',
      rating: 4
    },
    {
      id: '1002',
      code: 'zz21cz3c1',
      name: 'Blue Band',
      description: 'Product Description',
      image: 'blue-band.jpg',
      price: 79,
      category: 'Fitness',
      quantity: 2,
      inventoryStatus: 'LOWSTOCK',
      rating: 3
    }, 
  ];
  title = 'pdf-application';
 
  generatePDF(el: ElementRef<HTMLTableElement | HTMLElement>) {

    const doc = new jsPDF();

    const pdfTable = this.tableElement.nativeElement;

    var html = htmlToPdfmake(pdfTable.innerHTML);

    const documentDefinition = {
      content: html,

    };
    pdfMake.createPdf(documentDefinition).download();
  }

}


**HTML**
<p-button (onClick)="generatePDF(tableElement)" [rounded]="true" label="Download PDF" severity="success"></p-button>
<!-- Table -->
<div #tableRef class="myClass" id="content-to-pdf">

  <p-table [value]="products" [tableStyle]="{ 'max-width': '50rem','margin':'0 auto' }">
    <ng-template pTemplate="header">
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product?.code || "--"}}</td>
        <td>{{ product?.name || "--" }}</td>
        <td>{{ product?.category || "--"}}</td>
        <td>{{ product?.quantity || "--"}}</td>
      </tr>
    </ng-template>
  </p-table>

  <p-tag>Hello </p-tag>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ullam dignissimos laudantium accusamus et id
    praesentium dolorum quasi voluptate corporis sunt culpa pariatur aspernatur ab deserunt, aperiam quisquam, porro
    labore quae exercitationem nemo velit nam perspiciatis ad? Dicta, odit magni voluptatibus nemo ipsam earum numquam,
    amet pariatur impedit sunt praesentium sed soluta at. Alias asperiores minus optio quam enim deserunt, hic quis aut
    id fuga adipisci nobis iste harum totam dolores rerum, accusantium, quos maxime possimus tempore laborum architecto
    a sequi vero? Mollitia delectus maiores voluptates sed perferendis excepturi, facilis exercitationem eaque rerum
    autem quidem ut ab animi. Reiciendis perspiciatis sint odit blanditiis voluptas aspernatur voluptates iure assumenda
    eos! Placeat eos a cum aliquam beatae delectus iure eligendi, ea molestias. </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ullam dignissimos laudantium accusamus et id
    praesentium dolorum quasi voluptate corporis sunt culpa pariatur aspernatur ab deserunt, aperiam quisquam, porro
     </p>
</div>