download img throught hyperlink <a> in IE11 using javascript

StackOverflow https://stackoverflow.com/questions/22665111

Question

The following code works well for Google Chrome but not for IE11.

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcL
LkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGT
mE6z3QAAAABJRU5ErkJggg==" />
    <script>
        var a = document.createElement('a');
        var image = document.getElementById('img1');
        a.setAttribute('href', image.src);
        a.setAttribute("download", 'fileName');
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    </script>
</body>
</html>

When I run this code in IE11 I've got message: "Do you want to allow this website to open an app on your computer?"

After clicking "Allow" I've got "No apps are installed to open this type of link (data)"

How to make it work in IE11?

Was it helpful?

Solution

This one is usefull for IE10+: http://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

something like:

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcL
LkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGT
mE6z3QAAAABJRU5ErkJggg==" />
    <canvas id="canvas1"></canvas>
    <script>
        var image = document.getElementById('img1');
        var canvas = document.getElementById('canvas1');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        window.navigator.msSaveBlob(canvas.msToBlob(), 'drawingFileName.png');
    </script>
</body>
</html>

OTHER TIPS

You cannot use this approach in IE, since even as of version 11 it doesn't suppport "download" attribute of anchor element: http://caniuse.com/download

You will have to resort to server-side to generate the image and send it to the client

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top