Typescript: Wie verwende ich drawHeaderRow, um eine Tabelle mit horizontalen Headern zu erstellen?

Question

Mit jsPDF können Sie JSON-Daten in Tabellenform erstellen und diese Tabelle in einem PDF-Dokument speichern. Ich habe ein Angualr2/Typescript application erstellt, um dasselbe zu tun. Diese Tabelle erstellt meine JSON-Daten. Ich versuche zu verwenden jsPDF ist eine Tabelle mit horizontalen Headern erstellen. Beispiel dafür gegeben here. Code zum Erstellen ist wie folgt.

// Horizontal - shows how tables can be drawn with horizontal headers 
examples.horizontal = function() { 
    var doc = new jsPDF('p', 'pt'); 
    doc.autoTable(getColumns().splice(1,4), getData(), { 
    drawHeaderRow: function() { 
     // Don't draw header row 
     return false; 
    }, 
    columnStyles: { 
     first_name: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'} 
    } 
    }); 
    return doc; 
}; 

Vollständiger Code ist verfügbar here. Dieser Code ist in JavaScript geschrieben. Ich suche nach einer Möglichkeit, dies in Typoskript zu konvertieren. Hat jemand eine Idee, wie es geht?

Answer 1

Ihre Komponente könnte wie folgt aussehen:

@Component({ 
    selector: 'my-app', 
    template: 
    `<h1>JSON to PDF app</h1> 
    <div class="container" id="div1"> 
     <button id="create" (click)="convert('base')">Create file</button> 
     <button id="create" (click)="convert('horizontal')"> 
      Create file with horizontal table 
     </button> 
    </div> 
    ` 
}) 
export class AppComponent { 
    cols: Array<any> = [{ 
     title: "Details", 
     dataKey: 'details' 
    }, { 
     title: "Values", 
     dataKey: 'values' 
    }]; 

    optionsContainer = { 
    base: {}, 
    horizontal: { 
     drawHeaderRow:() => false, 
     columnStyles: { 
      details: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'} 
     } 
    } 
    }; 

    rows: Array<any> = []; 

    constructor() { 
    const item = { 
     "Name" : "XYZ", 
     "Age" : "22", 
     "Gender" : "Male" 
    }; 

    this.rows = Object.keys(item).map((key) => { 
     return { 'details': key, 'values': item[key] }; 
    }); 
    } 

    convert(action){ 
    const doc = new jsPDF() 
     .autoTable(this.cols, this.rows, this.optionsContainer[action]); 
    doc.save('Test.pdf'); 
    } 
} 

Demo Plunker