Autotable blocks the UI with large amount of data

[zs-err]

This is my code:

  exportAsPdf(tableName: string, columns: any, exportData: any, minimal?: boolean) {
    const doc = new jsPDF('l', 'mm', [minimal ? 600 : 297, 210]);

    const columnStyles = {};
    columns.forEach(column => {
      column.dataKey = column.field;
      columnStyles[column.dataKey] = { minCellWidth: 20 };
    });

    autoTable(doc, {
      columns,
      body: exportData,
      theme: 'grid',
      columnStyles
    });
    doc.save(tableName + '_' + new Date().getTime() + '.pdf');
    this.globalService.addFileToExportQueue('remove', tableName);
  }

Versions

    "@angular/core": "^14.2.0",
    "jspdf": "^2.3.1",
    "jspdf-autotable": "^3.5.14",

So when i have a lot of data, the autoTable function just blocks my main thread and my app freezes. This is a use case for us and we need some way to handle it.

Web workers are not an easy option for us because of this:
microsoft/TypeScript#20595 (comment)

Is there any way to make the job be async or chunkable? I need a way for it not to freeze the whole app.

Thank you

[mmghv]

Chunking the table can solve the issue of blocking the main thread, checkout the example is this issue.

[zs-err]

It's a great idea and it works what you intended but my data is variable size and chunks are too different in size.

Having to calculate manualli the width for every export I have is too much work.

Thank you for your recommendation, I'm sure it will help someone but it's not an ideal solution for us it seems.

[mmghv]

I think there could be an option to automate chunking the table page by page, or even could be the default behavior so we don't block the UI with large tables.

[zs-err]

So that basically now means for me that I have to find a new package if I want to fix this?
Or do some hacky solutions?

[mmghv]

Or implement it yourself, PRs are welcome :)

[zs-err]

Oh thank you but I don't think I'm the right person for that. 😅

Sorry if I came of as crass, I'm really thankful for your help. My response might have seem like I was being dismissive but I was just seeing if I undrestood properly.

Thank you for your help

[mmghv]

@zs-err No worries, your feedback is enough.

I'd like to keep this open as an improvement proposal for future consideration.

[zs-err]

To anyone having the same issue as me, I managed to make the web worker working by following this comment from the thread I linked above.
I just implemented the first code block that is posted there (I haven't implemented the interfaces he shows later).

At first add the worker using angular CLI (it adds some configurations).
After that change the worker code implementation to follow the one I linked.
Also I added the web worker inside the assets folder and added "skipLibCheck": true, to compilerOptions inside tsconfig.worker.json.

It's not possible to download inside the web worker (at least from my experience). I sent the value from doc.output('bloburl') to the main thread and the downloaded it using this code:

  downloadFileFromUrl(url: string, name: string) {
    let a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = url;
    a.download = name;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
  }

The solution is a bit hacky but not too much. It worked for me.