Downloading PNGs From Canvas in Internet Explorer 11

Recently, I was involved in a project that made use of canvas. It was a flowchart type application that needed to export the contents of the canvas to a PNG file.

In Chrome and Firefox, this is pretty straightforward. A window.location = dataUriForPNGFile would render the image in a new tab.

Internet Explorer 11 does not allow navigating to data URIs. I needed to force a download prompt using canvas data.


var canvas = document.getElementById('flowchart');  
window.navigator.msSaveBlob(canvas.msToBlob(), 'filename.png'); // pops up download prompt  

The snippet of code above is pretty simple. We grab the canvas element and execute window.navigator.msSaveBlob(). The first argument expects a blob which is returned from canvas.msToBlob(). The second argument in msSaveBlob() is the filename of the PNG image.

That's it. Attach this code to a click event and on click, a download prompt will fire up to download the PNG.