Comment forcer le téléchargement d'images dans le navigateur à l'aide de la programmation côté client ?

Forcer le téléchargement des images dans le navigateur à l'aide de la programmation côté client

Arrière-plan

Lorsque vous cliquez sur une feuille Excel ou d'autres fichiers téléchargeables, les navigateurs lancent généralement le processus de téléchargement de manière transparente. Cependant, il est nécessaire de reproduire ce comportement spécifiquement pour les fichiers image.

Implémentation des téléchargements d'images

En utilisant uniquement la programmation côté client, vous pouvez réaliser des téléchargements d'images comme suit :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        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, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}

Ce code intercepte les événements de clic sur l'élément image et invite l'utilisateur à l'enregistrer à l'aide d'une boîte de dialogue Enregistrer sous box.

Cas des téléchargements Excel

Dans le cas des téléchargements Excel, les navigateurs gèrent le processus de téléchargement en interne. Ils identifient le type de fichier en fonction du type MIME et déclenchent le comportement de téléchargement approprié sans aucune programmation supplémentaire.

Attribut HTML5 'download'

Cependant, les navigateurs les plus récents prennent en charge le attribut 'download' pour elements, qui offre un moyen plus pratique de lancer le téléchargement d'images :

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>