Export Highcharts to PDF with AngularJS Controller
<p>I'm looking to export a customized chart simliar to the post here <a href="https://stackoverflow.com/questions/25630811/export-highcharts-to-pdf-using-javascript-and-local-server-no-internet-connec/25632935#25632935">Export Highcharts to PDF (using javascript and local server - no internet connection)</a> that references <a href="http://fiddle.jshell.net/leighking2/dct9tfvn/" rel="nofollow noreferrer">http://fiddle.jshell.net/leighking2/dct9tfvn/</a>. This has the exact functionality that I'm looking for, however I have my chart/data in a sepearte file/controller. Does anyone know how I could take the concept from the post I listed above, but incorporate it into my controller? </p>

<p>Didn't want to include my whole index.html file but here are the two charts from it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="allCharts" class="col-md-6" &gt;
      &lt;button class="export_all" &gt;export all&lt;/button&gt;
            &lt;highchart id="chart1" config="chartConfig" class="span9 myChart" &gt;&lt;/highchart&gt;
                &lt;hr&gt;
            &lt;highchart id="chart2" config="chartConfig2" class="span9 myChart" &gt;&lt;/highchart&gt;  
 &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>'use strict';

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
   
    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line'
            },
            xAxis: {
          categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
            title: {
                text: null
            }
      },

      plotOptions: {
          line: {
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }

          }, allowPointSelect: false,
        series: {
          stacking: ''
        }
      }
    },
    series: [{ "name": "Purchase Costs", data: $scope.purchaseChartData }, { "name": "Rental Costs", data: $scope.rentalChartData }],
    title: {
      text: 'Rental and Purchase Costs'
    },
    credits: {
      enabled: true
    },
    loading: false,
    size: {}
    };


    $scope.chartConfig2 = {
        options: {
            chart: {
                type: 'column'
            },
            xAxis: {
          categories: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
          title: {
              text: null
          }
      },
      plotOptions: {

          column: {
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }

          }, allowPointSelect: false,
                series: {
                    stacking: ''
                }
            }
        },
        exporting:{
            allowHTML:true
        },
        series: [{ "name": "Annual Savings", data: $scope.savingsChartData }],
        title: {
            useHTML:false,
            text: 'Savings Compounded Annually'
        },
        credits: {
            enabled: true
        },
        loading: false,
        size: {}
    };

  $scope.reflow = function () {
    $scope.$broadcast('highchartsng.reflow');
  };


});</code></pre>
</div>
</div>
</p>

<blockquote>
  <p>Question Update</p>
</blockquote>

<p>Thanks Vaelyr! I now have the print button working; however I only have it adding text. I'm just having trouble linking my chart to the imageData. For now I just have the script within my html page until I get this working.</p>

<p>Attaching the charts to the imageData (via a loop) isn't working for me. I have class="myCharts" attached to both of my charts, but no luck. Now I'm just bacially trying to add my charts to the imageData.</p>

<pre><code> &lt;div id="allCharts" class="col-md-6" &gt;
    &lt;button class="exportAll" onClick="printPDF()" id="export_btn"&gt;export all&lt;/button&gt;
   &lt;highchart id="chart1" config="chartConfig" class="span9 myChart" &gt;&lt;/highchart&gt;
      &lt;hr&gt;
 &lt;highchart id="chart2" config="chartConfig2" class="span9 myChart" &gt;&lt;/highchart&gt;  
</code></pre>

<p></p>

<pre><code>      function printPDF() {
            var doc = new jsPDF();

            // chart height defined here so each chart can be palced
            // in a different position
            var chartHeight = 80;

            // All units are in the set measurement for the document
            // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
            doc.setFontSize(40);
            doc.text(35, 25, "My Exported Charts");

            //loop through each chart
            $('.myChart').each(function (index) {
            var imageData = $(this).highcharts().createCanvas();


            // add image to doc, if you have lots of charts,
            // you will need to check if you have gone bigger 
            // than a page and do doc.addPage() before adding 
            // another image.

            /**
             * addImage(imagedata, type, x, y, width, height)
             */
            doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
            //add.addImage();
    });


    //save with name
    doc.save('demo.pdf');
};
</code></pre>