从 angularjs.forEach 数组循环创建 PDFMake table 单元格
Create PDFMake table cells from angularjs .forEach loop over array
下面的代码呈现以下 PDF:Link to PDF on Google Docs。 (不允许我将图片粘贴到此post)
每首歌都有歌名和和弦进行。我正在寻找的是每个 song/chords 单元格有一行。在示例中,我在代码中对最后一首歌进行了硬编码,以显示它应该呈现的样子。每首歌都应该有自己的 table 行。我已经研究了几个小时了,还是想不通……希望这是一个简单的解决方案,我只是遗漏了一些非常明显的东西。
感谢您的帮助。
//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
整理出来...发布解决方案以防对某人有帮助。
Link 到使用以下函数创建的 PDF:https://drive.google.com/open?id=0B9COonOvl5koR09aNkRZUHpPczA
所有数据都来自 MySQL 数据库...所以有 table 具有各种属性(标题、艺术家、主要和弦结构等)的歌曲 - 然后是 table 个集合,每组包含三个集合列表。
//Fired when SET header clicked to generate PDF
$scope.openPDF = function (setList, setSongs, setNumber) {
songRows = [];
angular.forEach(setSongs, function(value, key) {
songRows.push({Title: value.Title, Chords: value.Chords, WhoStarts: value.WhoStarts});
});
var items = songRows.map(function(item) {
return [(100 + songRows.indexOf(item) + 1).toString().slice(-2) + '.', item.Title, item.Chords, item.WhoStarts];
});
var docDefinition =
{
pageOrientation: 'landscape',
content:
[
{ text: setNumber, style: 'firstLine'},
{ text: setList.EventDate + ' - ' + setList.SetName + ' @ ' + setList.Venue + '\n\n', style: 'secondLine' },
{
style: 'songRow',
table:
{
body:
[
[
{ text: '------' },
{ text: '--------------------------------------' },
{ text: '--------------------------------------' },
{ text: '--------------------------------------' },
]
].concat(items)
}
}
],
styles: {
firstLine: {
fontSize: 32,
bold: true,
alignment: 'center'
},
secondLine: {
fontSize: 15,
bold: true,
alignment: 'center'
},
songRow: {
fontSize: 18,
bold: true,
alignment: 'center',
},
}
};//End docDefinition
//Generate PDF
pdfMake.createPdf(docDefinition).open();
} //END Generate PDF Function
下面的代码呈现以下 PDF:Link to PDF on Google Docs。 (不允许我将图片粘贴到此post)
每首歌都有歌名和和弦进行。我正在寻找的是每个 song/chords 单元格有一行。在示例中,我在代码中对最后一首歌进行了硬编码,以显示它应该呈现的样子。每首歌都应该有自己的 table 行。我已经研究了几个小时了,还是想不通……希望这是一个简单的解决方案,我只是遗漏了一些非常明显的东西。
感谢您的帮助。
//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
整理出来...发布解决方案以防对某人有帮助。
Link 到使用以下函数创建的 PDF:https://drive.google.com/open?id=0B9COonOvl5koR09aNkRZUHpPczA
所有数据都来自 MySQL 数据库...所以有 table 具有各种属性(标题、艺术家、主要和弦结构等)的歌曲 - 然后是 table 个集合,每组包含三个集合列表。
//Fired when SET header clicked to generate PDF
$scope.openPDF = function (setList, setSongs, setNumber) {
songRows = [];
angular.forEach(setSongs, function(value, key) {
songRows.push({Title: value.Title, Chords: value.Chords, WhoStarts: value.WhoStarts});
});
var items = songRows.map(function(item) {
return [(100 + songRows.indexOf(item) + 1).toString().slice(-2) + '.', item.Title, item.Chords, item.WhoStarts];
});
var docDefinition =
{
pageOrientation: 'landscape',
content:
[
{ text: setNumber, style: 'firstLine'},
{ text: setList.EventDate + ' - ' + setList.SetName + ' @ ' + setList.Venue + '\n\n', style: 'secondLine' },
{
style: 'songRow',
table:
{
body:
[
[
{ text: '------' },
{ text: '--------------------------------------' },
{ text: '--------------------------------------' },
{ text: '--------------------------------------' },
]
].concat(items)
}
}
],
styles: {
firstLine: {
fontSize: 32,
bold: true,
alignment: 'center'
},
secondLine: {
fontSize: 15,
bold: true,
alignment: 'center'
},
songRow: {
fontSize: 18,
bold: true,
alignment: 'center',
},
}
};//End docDefinition
//Generate PDF
pdfMake.createPdf(docDefinition).open();
} //END Generate PDF Function