JSPDF-autotable：根据列数设置动态字体大小

Question

我需要打印一个包含 20 多列的大型 table。有没有办法在不扭曲视图的情况下实现这一点。

我试过根据 table 的列数设置字体大小，但无法实现：

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 然后只包含元素，我的视图都会失真显示在指定宽度内。

Answer 1

现在我可以通过计算 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;
      }

JSPDF-autotable：根据列数设置动态字体大小

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

jspdf

jspdf-autotable