The code below renders the following PDF: Link to PDF on Google Docs. (I was not allowed to paste a picture into this post)
There are song titles and chord progressions for each song. What I am looking for is to have a single row for each song/chords cells. In the example I hard coded one last song in the code to show what it should render like. Each song should have its own table row. I have been at it for hours and can't figure it out ...hoping it's a simple solution and I'm just missing something pretty obvious.
Thanks for any help.
//Fired when SET header clicked to generate PDF
$scope.openPDF = function (SetName, setSongs) {
songTitles = [];
songChords = [];
angular.forEach(setSongs, function(value, key) {
songTitles.push({ text: value.Title, style: 'tableHeader'});
songChords.push({ text: value.Chords, style: 'tableHeader'});
});
var docDefinition =
{
pageOrientation: 'landscape',
content: [
{ text: 'SET 01', style: 'firstLine'},
{ text: SetName, style: 'secondLine' },
{
table:
{
headerRows: 0,
body:
[
[songTitles, songChords],['American Girl', 'D - E - G - A']
]
}
}
],
styles: {
firstLine: {
fontSize: 32,
bold: true,
alignment: 'center'
},
secondLine: {
fontSize: 15,
bold: true,
alignment: 'center'
},
}
};//End docDefinition
//Generate PDF
pdfMake.createPdf(docDefinition).open();
}; //END Function