1

以下のコードは、次の PDF をレンダリングします: Link to PDF on Google Docs。（この記事に写真を貼り付けることは許可されていませんでした）

各曲には曲名とコード進行があります。私が探しているのは、曲/コードのセルごとに 1 つの行を持つことです。この例では、コードの最後の 1 曲をハードコーディングして、どのようにレンダリングするかを示しています。各曲には、独自のテーブル行が必要です。私は何時間もそれに取り組んできましたが、それを理解することはできません...それが単純な解決策であり、かなり明白な何かが欠けていることを願っています.

助けてくれてありがとう。

    //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
4

1 に答える 1

2

それを整理しました...それが誰かを助ける場合に備えて解決策を投稿してください。

以下の関数を使用して作成された PDF へのリンク: https://drive.google.com/open?id=0B9COonOvl5koR09aNkRZUHpPczA

すべてのデータは MySQL データベースから取得されます...そのため、さまざまな属性 (タイトル、アーティスト、メイン コード構造など) を持つ曲のテーブルがあります。次に、セットごとに 3 つのセットリストを含むセットのテーブルがあります。

    //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
于 2016-06-07T13:46:05.963 に答える