JSPDF-autotable: Set Dynamic Font Size based on number of columns

Question

I have a need to print a large table with 20+ columns. Is there a way to achieve this without distorting the view.

I have tried setting font size based on the number of columns of the table but unable to achieve that:

doc.autoTable({
      styles: {
        cellPadding: 0.5,
        overflow: 'visible',
        cellWidth: 'wrap'
      },
      columnStyles: {
        columnWidth: 'auto'
      },
      margin: {
        left: 5,
        right: 5
      },
      tableLineWidth: 0.5,
      head: headers as any,
      body: body,
      didDrawCell: (data) => {
        if (this.length > 5) { // Number of columns
          doc.autoTable({
          styles: {
             fontSize: 1
            }
           });
        }
      },
      didDrawPage: (data) => {
        console.log(data);
      }
    });

Or is there any other better way to achieve that because currently whatever I try my view is distorted if I show all the columns and if I wrap the columnWidth and cellWidth then only contained element within specified width are shown.

Answer 1

For now I am able to do it by calculating fontSize upFront and passing it as a value in styles object

exportAsPDF(data: Array<any>, fileName: string) {
        const headers: Array<Array<string>> = this.setPDFHeader(data);
        const fontSize: number = this.calculateFontSize(headers[0].length);
        const body: Array<Array<string>> = this.setPDFBody(data);
        const doc = new jsPDF();
    
        doc.autoTable({
          styles: {
            cellPadding: 0.5,
            fontSize: fontSize
          },
          headStyles: {
            fillColor: '#3f51b5',
            textColor: '#fff',
            halign: 'center'
          },
          bodyStyles: {
            halign: 'center'
          },
          margin: {
            left: 5,
            right: 5
          },
          tableLineWidth: 1,
          head: headers as any,
          body: body
        });
        doc.save(fileName);
      }
    
      setPDFHeader(data: Array<any>): Array<Array<string>> {
        return [
          Object.keys(data[data.length - 1]).map(
            (item) => `${item.charAt(0).toUpperCase()}${item.substr(1, item.length)}`
          )
        ];
      }
    
      setPDFBody(data: Array<any>): Array<Array<string>> {
        return data.map((item) => {
          const keys = Object.keys(item);
          const values = [];
          keys.forEach((key) => {
            values.push(item[key]);
          });
          return values;
        });
      }
    
      calculateFontSize(count: number): number {
        return count ? tableWidth / count : count;
      }