Hide PDF content design component in Angular

Question

I have two components. Billing component(User type the item details) and billpage component (Pdf page is designed and pdf is generated).

The item details from(billing.ts) are passed through service (pdfcontent.service.ts) to billpage component(billpage.ts).

Below I shared the screen shot. Everything is working fine except one major issue. Here when I submit the button pdf is generated from billpage component. But the design of pdf page(highlighted in yellow square ) is appearing in the billing page. But I don't need to show this in the view. I do the below steps to avoid but none of them are giving good result.

Pdf is not generated when display none property give.
Empty pdf is generated.
Removed pdf is not generated.

billing.component.html

 
.....
....
...

billing.component.ts

onSubmit() {
    this.billcontent=this.productFormarray.value;
    this.pdfService.updatePdfContent(this.billcontent);
  }

pdfcontent.services.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PdfcontentService {

  constructor() { }
  public pdfContentSource = new BehaviorSubject("");
  pdfContent$ = this.pdfContentSource.asObservable();
  updatePdfContent(content: any) {
    this.pdfContentSource.next(content);
  }
}

billpage.component.html


  Customer Name: {{billpagecontent.customername}}
  Contact Number: 
  Bill No
  

    
      
        
          Product Name
        
        
          Quantity
        
        
          Price
        
        
          Gst
        
      
    

    
      {{product.productname}}
      {{product.quantit}}
      {{product.price}}
      {{product.gst}}
    
    
      
      Total
      {{billpagecontent.totalprice}}
      {{billpagecontent.totalgst}}
    
    
      
      Total Bill
      {{billpagecontent.overalltotal}}

billpage.component.ts

import { Component, OnInit } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { PdfcontentService } from '../services/pdfcontent.service';

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

  billpagecontent: any = {};
  constructor(public pdfService: PdfcontentService) {
  }

  ngOnInit(): void {
    this.pdfService.pdfContent$.subscribe(content => {
      if (content) {
        this.billpagecontent = content;
        let pdfcontent = document.getElementById('billpagecontent');
        setTimeout(() => {
          this.convetToPDF(pdfcontent);
        }, 3000);
      }
    });
  }

  public convetToPDF(bcontent: any) {
    var data = bcontent as HTMLCanvasElement;
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      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'); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
      pdf.save('new-file.pdf'); // Generated PDF
    });
  }
}

Please someone help to solve this. How to initiate another component without placing the template of that component. ()

Hide PDF content design component in Angular

Answers (1)

Related Questions