Export chart and table both to pdf

Question

I want to export chart created using chart.js and table both in pdf , coding is in angular js. I tried to use html2canvas but it renders only viewport and my table is large so it is getting cut. I also tried to use pdfmake and add table and image content both but both are not working together only one works at a time.

html2canvas(document.getElementById(Report), {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    data.width=500;
                    data.height=1500;
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500,
                        }]
                    };

                    pdfMake.createPdf(docDefinition).download(fname+".pdf");
                }
            });

This cuts data.

var docDefinition = {
    content: [{
            image: url,
            table: {
                headerRows: 1,
                widths: [ '*', 'auto', 100, '*' ],
                body: [
                  [ 'First', 'Second', 'Third', 'The last one' ],
                  [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
                  [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
                ]
              },
            width:500,
        }]
};

pdfMake.createPdf(docDefinition).download(fname+".pdf")

This not working together

Answer 1

Some curly brackets are missing in the code. It will work like in this way:

var docDefinition = {
  content: [{
        image: url }, {
        table: {
            headerRows: 1,
            widths: [ '*', 'auto', 100, '*' ],
            body: [
              [ 'First', 'Second', 'Third', 'The last one' ],
              [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
              [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
            ]
          },
        width:500,
    }]
};