Can pdfmake generate mixed highcharts(SVG) and other html content?

I want to use pdfmake to download a whole html page into PDF. However, my page is mixed with highcharts,plain text,html and images. When I try to export my page, all the highchart part are missing (rest is fine). Not sure if pdfmake is the best way to handle it or not. Can anyone help with this?

Thanks

I have reproduced the error, please see

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);

.container {
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
}

#buttonrow {
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
}

.highcharts-axis-line {
  stroke-width: 0;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>

<body>
  <div ng-controller="listController" id="exportthis">
    <div id="container" style="width:50%;float:left;">
      <p class="highcharts-description">
      </p>
    </div>
    <div>
      <table class="editorDemoTable" style="color: #000000; font-size: 14px; width: 536px;">
        <thead>
<tr>
<td style="width: 192px;">Name of the feature</td>
<td style="width: 181px;">Example</td>
<td style="width: 145px;">Default</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
</tbody>
</table>
    </div>

    <button ng-click="export()">export</button>
  </div>
</body>

</html>

Solution

I guess you're trying to add your chart in the PDF with as-is. The problem is that it's canvas and it's badly rendered in .pdf files.

I already faced this situation, and my advice to you will be to firstly generate a supported image version of your chart.

Depending on what you want, you can export a JPG, PNG or even a SVG image of your chart. In order to not make the pdf file too big, and to avoid pixels while zooming in it, I opted in for the SVG export.

Here is a documentation and an example on how to get an SVG export of your chart.

Going further: Since the data the chart was composed of was sensible data, I needed to set up my own export server. Hopefully, Highcharts provide a well documented (and an official) way to set you own export server up with different OS supports.