2

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  

1 Answer 1

3

Sorted it out ...posting solution in case it helps someone.

Link to PDF created using the function below: https://drive.google.com/open?id=0B9COonOvl5koR09aNkRZUHpPczA

All data is pulled from a MySQL database...so there is a table of songs with various attributes (Title, Artist, main chord structure, etc) - then a table of sets which contain three setlists per set.

    //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  
2
  • Hi, Its a good to generte the PDF. My requirement is that each page will have a header with 3 lines and in bottom of page with table. In this way, array for which pdf has to be generated. Please Help me. Commented Nov 30, 2017 at 13:31
  • Hi Nitin...I'm sorry but I'm not a very good developer...I don't think I can help you. You really should create a new question I think ... this is an old post and I htink what you are asking for is a new question. Sorry I can't help. Good luck!! Commented Nov 30, 2017 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.