1

I have jqplot and I want to download it once click a button as a jpg or png. I can do it using 

$('#chartdiv').jqplotSaveImage();

(chartdiv is the div with plot)

It is working in chrome and firefox only. In IE it is not working.I tried in IE 11.

And I have another problem in chrome the downloaded image file name is 'download' and in firefox it is some wired name with .part extension (ex :- ka8ShgKH.part). Is there a way to put plot title as the download file name ?

thank you.

$("#btnSaveImg").on("click", LoadImage);

LoadImage = function(){
    $('#chartdiv').jqplotSaveImage();
}

EDIT jqplotsaveimage function

$.fn.jqplotSaveImage = function() {
    var imgData = $(this).jqplotToImageStr({});
    if (imgData) {
        window.location.href = imgData.replace("image/png", "image/octet-stream");
    }

};
DilanG
  • 1,197
  • 1
  • 26
  • 42
  • Miss the function jqplotSaveImage().. please load the script inside the question... – Mirko Cianfarani Feb 21 '14 at 06:43
  • @MirkoCianfarani I added that function above. It is a function that in jquery.jqplot.js file. – DilanG Feb 21 '14 at 06:49
  • 1
    Looks like you are out of luck. IE is very specific about how and where the `data URIs` will work: http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx – Mark Feb 22 '14 at 18:05
  • @Mark thank you for the valuable response. Can you please tell me is there a any method to download jqplot by a button click, working on main three browsers(chrome,firefox and IE) ? – DilanG Feb 24 '14 at 03:43
  • I'm assuming you have access to the web-server? You could write a simple script that you POST the base64 encoded plot to and it just sends it back as a file. You could control the file's name like that as well. – Mark Feb 24 '14 at 15:48

1 Answers1

0

I'm using jqPlot and I had issues using the above in IE and even if it worked in Chrome I could not name the downloaded image.

I found this case force download base64 image and the http://danml.com/download.html . That's working both in later versions of IE and Chrome and you can save the image with your own filename. The download.js can be used for more than just images.

//include the downoad.js file from http://danml.com/download.html

<button id="dwnl-chart-1" onClick="$.fn.jqplotSaveImage('chart-1', 'chart_name">Download as image</button>

    $.fn.jqplotSaveImage = function(id, filename) {

        var imgData = $('#'+id+'-parent').jqplotToImageStr({});
        if (imgData) {
            download(imgData, filename+'.png', "image/png");
        }
    };
Community
  • 1
  • 1
orjtor
  • 55
  • 6