JSPDF-autotable: Установите Dynami c размер шрифта в зависимости от количества столбцов - PullRequest
Новая
       62

JSPDF-autotable: Установите Dynami c размер шрифта в зависимости от количества столбцов

0 голосов
/ 06 августа 2020

Мне нужно напечатать большую таблицу с 20+ столбцами. Есть ли способ добиться этого без искажения представления.

Я попытался установить размер шрифта на основе количества столбцов в таблице, но не смог этого добиться: 

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);
      }
    });

Или есть другой лучший способ добиться этого, потому что в настоящее время все, что я пробую, мое представление искажается, если я показываю все столбцы, и если я оборачиваю columnWidth и cellWidth, то отображаются только содержащиеся элементы в пределах указанной ширины.

1 Ответ

0 голосов
/ 06 августа 2020

На данный момент я могу сделать это, вычислив fontSize upFront и передав его как значение в объекте стилей 

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;
      }
...