如何在jsPdf表中设置表

Question

Hi i am using jsPdf to export report as pdf my code is here

 import { Component, OnInit, AfterViewInit, Inject, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';

@Component({
  templateUrl: 'goldenSignature.component.html',
  providers: [UserService,
    { provide: 'Window', useValue: window }
  ],
})

export class GoldenSignatureComponent {  

  download() {
    let type;
    if (this.type) {
      type = this.type;
    }
    else {
      type = this.message.allProducts;
    }
    let columns = ["S.No", "Product Name", "Product Type", "Brand Name", "Model Name", "Sample Size", "Status", "Version Number"];
    let data = [];
    let headers = { "S.No": "S.No", "Product Name": "Product Name", "Product Type": "Product Type", "Brand Name": "Brand Name", "Model Name": "Model Name", "Sample Size": "Sample Size", "Status": "Status", "Version Number": "Version Number" };
    data.push(headers);
    if (type == this.message.allProducts) {
      for (let i = 0, j = 1; i < this.data.length; i++) {
        let data1 = {};
        data1 = { "S.No": j, "Product Name": this.data[i].productName, "Product Type": this.data[i].productType, "Brand Name": this.data[i].brandName, "Model Name": this.data[i].modelName, "Sample Size": this.data[i].sampleSize, "Status": this.data[i].status, "Version Number": this.data[i].versionNo };
        data.push(data1);
        j++;
      }
    }
    else {
      for (let i = 0, j = 1; i < this.data.length; i++) {
        if (type == this.data[i].productName) {
          let data1 = {};
          data1 = { "S.No": j, "Product Name": this.data[i].productName, "Product Type": this.data[i].productType, "Brand Name": this.data[i].brandName, "Model Name": this.data[i].modelName, "Sample Size": this.data[i].sampleSize, "Status": this.data[i].status, "Version Number": this.data[i].versionNo };
          data.push(data1);
          j++;
        }
      }
    }
    var doc = new jsPDF('landscape', 'pt');
    doc.setFontSize(18);
    doc.setTextColor(0, 0, 0);
    doc.text(300, 100, type);
    let styles = {
      autoSize: true,
      printHeaders: false,
      columnWidths: 80
    }
    doc.table(100, 150, data, columns, styles);
    doc.save(this.message.pdfGoldenSignature);
  }   

}

everything works fine the problem is i want to set width for table and table columns . Please anyone tell how to set width for table and other properties of table Thanks in advance

Answer 1

You have to use different functions of jsPdf give suitable margin and padding, it could be tedious task to represent in suitable manner.

Instead try jsPDF-autotable plugin that work great , offered different styles/themes.You can easily customized height and width of columns and rows.