How can I use jsPDF to render multiple pagination results (HTML to PDF)

Question

I'm trying to print the result of multiple jsPDF.HTML(...). Each one of them runs in a different pagination of a list inside the same div. The PDF conversion of that div displays the first page multiple times even though I can see the items inside it changing in the UI before executing each jsPDF.HTML(...).

Is there a solution for this or at least an explanation of why it is happening?

  async printReceipt() {
    console.log('getting the number of pages in the pagination');
    var lenArr = new Array(Math.ceil(this.receiptItems.length / 10));
    var doc = new jsPDF('p', 'pt', [496, 702]);
    var arrayBuffer: ArrayBuffer[] = [];
    var fileURL;
    console.log('creatting main doc');
    for (let index = 0; index < lenArr.length; index++) {
      console.log('Changing pagination to:', index + 1);
      this.page = index + 1;
      console.log('Converting page:', index + 1);
      await new Promise<void>(async (resolve, reject) => {
        doc.html(document.getElementById('receipt'), {
          callback: async (res) => {
            console.log('Adding page to buffer, page:', index + 1);
            arrayBuffer.push(res.output('arraybuffer'));
            if (lenArr.length - 1 == index) {
              console.log('Printing');
              await this.mergePdfs(arrayBuffer);
            }
            resolve();
          },
        });
      });
    }
  }

logs order:

maybe is because this line `this.page = index + 1;`? seems to me that the page index is not changing until the Promise is resolved — JoxieMedina, Mar 24 '21 at 22:16
@JoxieMedina Thanks for your response, tried moving "this.page = index + 1;" outside the promise but the behavior its the same. Code is updated with the change. — Emanuel Silva, Mar 24 '21 at 22:59

Emanuel Silva · Answer 1 · 2021-03-25T01:43:09.430

I solved the problem by moving the declaration of the jsPDF object into the promise and adding a timeout between the page change and the promise.

  async printReceipt() {
    console.log('getting the number of pages in the pagination');
    var lenArr = new Array(Math.ceil(this.receiptItems.length / 10));
    var arrayBuffer: ArrayBuffer[] = [];
    var fileURL;
    console.log('creatting main doc');
    for (let index = 0; index < lenArr.length; index++) {
      console.log('Changing pagination to:', index + 1);
      this.page = index + 1;
      await this.sleep(1000);
      console.log('Converting page:', index + 1);
      await new Promise<void>(async (resolve, reject) => {
        ***var doc = new jsPDF('p', 'pt', [496, 702]);***
        doc.html(document.getElementById('receipt'), {
          callback: async (res) => {
            console.log('Adding page to buffer, page:', index + 1);
            arrayBuffer.push(res.output('arraybuffer'));
            if (lenArr.length - 1 == index) {
              console.log('Printing');
              await this.mergePdfs(arrayBuffer);
            }
            resolve();
          },
        });
      });
    }
  }

  sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

It appears that the jsPDF object preserves the first result of jsPDF.html(...) no matter if this method is executed multiple times.

How can I use jsPDF to render multiple pagination results (HTML to PDF)

1 Answers1