javascriptangulartypescriptdomelementref

How to manipulate/copy ElementRef in angular without manipulating the DOM?

I have a formatted html table of nearly 200rows which I have to export to PDF. Currently I'm using jsPDF library.

makePdf() {
    var elWidth = this.el.nativeElement.getBoundingClientRect().width
    var elHeight = this.el.nativeElement.getBoundingClientRect().height
    this.loadingSubject.next(true)
    this.zone.run(() => {
    let pdf = new jsPDF({
      orientation: 'l',
      unit: 'px',
      format: [elWidth, elHeight],
      compress:true
    });
    pdf.html(element.nativeElement, {
      callback: (pdf) => {
        pdf.save('sample.pdf');
      }
    })
    })
  }

It is now saving as pdf segregating the height by default causing the rows cut in line to the next page as shown in below image. enter image description here

I want to separate rows like 13 rows and append table, thead tags to each 13 rows making them separate tables in each page.

Any changes to el.nativeElement is affecting the DOM. Is there any alternative where I can get html and make changes to the html without manipulating the DOM in angular??

Solution

  • You want to clone the element with cloneNode: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

    const clone = element.cloneNode(true) to get a copy and modify as you see fit