Converting json data in table to pdf file

Question

In my angular app i display JSON data in a table with pagination using ngx-pagination i want to export my table in pdf format I used a couple of npm packages that take a screenshot off the HTML page and convert it to a pdf to export, the only problem is not all the data is being displayed because of the pagination and number of items per page, is there a work around this?

Here is the code I used :

 <table
            class="
              table
              is-hoverable is-striped is-fullwidth
              content-table
              #userTable
            "
id="htmlData"
          >
            <thead>
              <tr>
                <th>{{ "DataSource.RecordID" | translate }}</th>
                <th colspan="6">{{ "DataSource.Details" | translate }}</th>
              </tr>
            </thead>
            <tbody>
              <tr
                *ngFor="
                  let row of FilteredMatchTransactions
                    | paginate: { itemsPerPage: itemsPerPage, currentPage: p };
                  let i = index
                "
              >
                <td>
                  {{ "DataSource.SessionID" | translate }} :
                  {{ row.SESSION_ID }}
                </td>
                <td>
                  {{ "DataSource.ExternalStan" | translate }} :
                  {{ row.EXTERNAL_STAN }}
                </td>
                <td>
                  PAN :
                  {{ row.CARD_NUMBER }}
                </td>
                <td>
                  {{ "DataSource.Amount" | translate }} :
                  {{ row.TRANSACTION_AMOUNT.split(" ")[0] }}
                </td>
                <td>
                  {{ "DataSource.Currency" | translate }} :
                  {{ row.TRANSACTION_AMOUNT.split(" ")[1] }}
                </td>
                <td>
                  Terminal :
                  {{ row.TERMINAL_ID }}
                </td>
                <td>
                  {{ "DataSource.TransactionDate" | translate }} :
                  {{ row.TRANSACTION_DATE }}
                </td>
              </tr>
            </tbody>
          </table>

ts :

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
....
....
public downloadPDF(): void {
    let DATA = document.getElementById('htmlData');
    console.log(DATA);
    html2canvas(DATA).then((canvas) => {
      let fileWidth = 208;
      let fileHeight = (canvas.height * fileWidth) / canvas.width;

      const FILEURI = canvas.toDataURL('image/png');
      let PDF = new jsPDF('p', 'mm', 'a4');
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);

      PDF.save('angular-demo.pdf');
    });
  }

Answer 1

my idea is about to use a temporary created table DOM element instead of using angular active table (situated in the view), this is an overview of the idea:

// I suppose that this jsonApiData is an array got from API which you used it in DataSource and containing all data without pagination, so you should be sure that you already loaded all data from the API before performing any data manipulation or consumption:
private jsonApiData;

  
public downloadPDF(): void {
    /*let table = document.getElementById('htmlData');*/

    // refer to getTemporaryTableDom method below
    let table = this.getTemporaryTableDom(this.jsonApiData);

    html2canvas(table).then((canvas) => {
      ...
      ...
      // Important: after finishing your save, remove the temporary table DOM from the memory
      table.remove(); ==> to free up your memory.
    });
  }

...
...
/** this method will create a temporary table dom,
  * and fill it with your api data.
 **/
private getTemporaryTableDom(jsonData){

  let t = document.createElement('table');

// fill your DOM Html table with your api data 
  for(let [index,obj] of Object.entries(jsonData)){   
    let newInsertedRow = t.insertRow(index); 

    // to insert cells and its values you can also use loop, i will let you free to chose
    c = newInsertedRow.insertCell(0); // example SessionID 
    c.innerHTML = obj.SessionId; // SessionID value

    c = r.insertCell(1); // example: ExternalStan
    c.innerHTML = obj.ExternalStan; // ExternalStan value
    ...
    ...
  }

 return t; // to return the DOM TAble html element

}

This is just an idea to make sure you are using static data so that you will be able to control it without any problem, because using the angular view Doms can make things more difficult to manage because they are based on many concepts like ChangeDetection, component lifecycle, etc..

for more table dom manipulation details, you can refer to these ressources:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
• https://stackoverflow.com/a/2324826/8678900