1

I went through the demo jsfiddle provided on the highcharts website at http://jsfiddle.net/highcharts/PDnmQ/. When i click the button as save as png, it downloads a file titled as download and not a png file.

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>

Script:

(function (H) {
    H.Chart.prototype.createCanvas = function (divId) {
        var svg = this.getSVG(),
            width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
            height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
            canvas = document.createElement('canvas');

        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

        if (canvas.getContext && canvas.getContext('2d')) {

            canvg(canvas, svg);

            var image = canvas.toDataURL("image/png")
                .replace("image/png", "image/octet-stream"); 

            // Save locally
            window.location.href = image;
        } else {
            alert ("Your browser doesn't support this feature, please use a modern browser");
        }

    }
}(Highcharts));

$('#container').highcharts({

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    title: {
        text: 'Click the button and Save as PNG =>',
        align: 'right',
        x: -40
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    exporting: {
        buttons: {
            contextButton: {
                menuItems: [{
                    text: 'Print',
                    onclick: function() {
                        this.print();
                    }
                }, {
                    text: 'Save as PNG',
                    onclick: function() {
                        this.createCanvas();
                    },
                    separator: false
                }]
            }
        }
    }

});
Nitesh
  • 1,241
  • 4
  • 16
  • 25

1 Answers1

4

You can assign the data-uri from canvas to an anchor element which you then can attribute with a download attribute setting the filename.

For example, lets say this anchor exists in your HTML:

<a id="saveAs" href="#">Click to download</a>

When you then grab the image from canvas you update the anchor tag this way:

var link = document.getElementById('saveAs');

link.href = canvas.toDataURL();   /// set data-uri as href, defaults to PNG
link.download = 'myFilename.png'; /// set filename

Now you can click the anchor link and it will allow you to download the file with the set filename.

You can also create an off-screen anchor tag dynamically and invoke a click by simulating an click event.

  • heres a working fiddle, but i wonder if it works on IE9 and below. http://jsfiddle.net/niteshp27/PDnmQ/114/ – Nitesh Feb 14 '14 at 10:48
  • @Nitesh older browsers and some new ones won't support the new download attribute unfortunately. Here is an [overview on which browsers has support](http://caniuse.com/#feat=download). –  Feb 14 '14 at 11:41
  • @Nitesh What exactly is VisitsContainer in your jsfiddle? as in `if ($('#VisitsContainer').length > 0)` – ps0604 Oct 05 '14 at 17:52