152 votes

Obliger le navigateur à télécharger les fichiers image au clic

J'ai besoin que le navigateur télécharge les fichiers image comme il le fait en cliquant sur une feuille Excel.

Existe-t-il un moyen de faire cela en utilisant uniquement la programmation côté client ?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                var name = element.nameProp;
                var address = element.href;
                saveImageAs1(element.nameProp, element.href);
                return false; // Prevent default action and stop event propagation
            }
            else
                return true;
        };

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

Comment cela doit-il fonctionner en cas de téléchargement d'une feuille Excel (ce que font les navigateurs) ?

216voto

Grâce à HTML5, vous pouvez ajouter l'attribut "download" à vos liens.

<a href="http://stackoverflow.com/path/to/image.png" download>

Les navigateurs compatibles seront alors invités à télécharger l'image portant le même nom de fichier (dans cet exemple image.png).

Si vous spécifiez une valeur pour cet attribut, celle-ci deviendra le nouveau nom de fichier :

<a href="http://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">

UPDATE : Depuis le printemps 2018, cela n'est plus possible pour l'origine croisée href s . Donc si vous voulez créer <a href="https://i.imgur.com/IskAzqA.jpg" download> sur un domaine autre que imgur.com, il ne fonctionnera pas comme prévu. Annonce des dépréciations et suppressions de Chrome

139voto

DrowsySaturn Points 1497

J'ai réussi à le faire fonctionner dans Chrome et Firefox également en ajoutant un lien au document to.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

59voto

iXs Points 371

Leeroy & Richard Parnaby-King :

MISE À JOUR : Depuis le printemps 2018, cette opération n'est plus possible pour les d'origine croisée. Donc si vous voulez créer sur un domaine autre que imgur.com, cela ne fonctionnera pas comme prévu. Dépréciations et suppressions de Chrome annonce

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

58voto

Curse Points 102

Une approche plus moderne utilisant Promise et async/await :

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

puis

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

Vous trouverez la documentation ici : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

24voto

Riley Bell Points 162

Mise à jour au printemps 2018

<a href="http://stackoverflow.com/path/to/image.jpg" download="FileName.jpg">

Bien que cela soit toujours pris en charge, depuis février 2018, chrome a désactivé cette fonctionnalité pour le téléchargement d'origine croisée, ce qui signifie que cela ne fonctionnera que si le fichier est situé sur le même nom de domaine.

J'ai trouvé une solution de contournement pour le téléchargement d'images interdomaines après la nouvelle mise à jour de Chrome qui a désactivé le téléchargement interdomaines. Vous pourriez modifier cette fonction pour qu'elle réponde à vos besoins. Vous pourriez être en mesure d'obtenir le type de mime de l'image (jpeg, png, gif, etc) avec un peu plus de recherche si vous avez besoin. Il existe peut-être un moyen de faire quelque chose de similaire avec les vidéos. J'espère que cela aidera quelqu'un !

Leeroy & Richard Parnaby-King :

MISE À JOUR : Depuis le printemps 2018, cette opération n'est plus possible pour les d'origine croisée. Donc si vous voulez créer sur un domaine autre que que imgur.com, cela ne fonctionnera pas comme prévu. Dépréciations de Chrome et annonce des suppressions

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X