I am in need of generate pdf in one component(billing.component). But the pdf content (div id=’billcontent’) is available in another component (billingpage.component).

Please someone help how to access the div element with id=’billcontent’ for pdf creation from billpage.component to billing.component.

The billing.component have button (Downloadpdf).

billing.component.html

<button type="button" class="btn btn-primary" (click)="createPdf()">Download</button>

billing.component.ts

 import { Component, Output, EventEmitter, OnInit, ViewChild } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-billing',
  templateUrl: './billing.component.html',
  styleUrls: ['./billing.component.css']
})
export class BillingComponent implements OnInit {

public createPdf() {
    var data = document.getElementById('billcontent') as HTMLCanvasElement;
    html2canvas(data).then(canvas => {
      var imgWidth = 208;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jsPDF('p', 'mm', 'a4');
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('new-file.pdf'); // Generated PDF
    });
  }
}

billpage.component.html

<div class="" id="billcontent">
    <table class="table table-condensed">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>