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) ?

2voto

Muhammad Awais Points 1735

Essayez ça :

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>

1voto

temirtator Points 66

Vous pouvez faire

const urls = ['image.png', 'image1.png'];
urls.forEach((url) => {
   window.open(url, "_blank");
});

1voto

ixhimanshu Points 41
    // Pass desired URL as a param
    function saveAs(uri) {
        fetch(uri)
            .then(res => res.blob()) // Gets the response and returns it as a blob
            .then(blob => {
                // Here, I use it to make an image appear on the page
                let objectURL = URL.createObjectURL(blob);
                let myImage = new Image();
                myImage.href = blob;
                myImage.download = generateFileName();
                //Firefox requires the link to be in the body
                document.body.appendChild(myImage);
                //simulate click
                myImage.click();
                //remove the link when done
                document.body.removeChild(myImage);
            });
    }

    // Generate filenames for the image which is to be downloaded
    function generateFileName() {
        return `img${Math.floor(Math.random() * 90000) + 10000}`;
    }

0voto

Engr Zardari Points 490
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

-6voto

Mufasa Points 72

J'ai trouvé que

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

n'a pas fonctionné pour moi. Je ne sais pas trop pourquoi.

J'ai découvert que vous pouvez inclure un ?download=true à la fin de votre lien pour forcer un téléchargement. Je crois avoir remarqué que cette technique est utilisée par Google Drive.

Dans votre lien, incluez ?download=true à la fin de votre href.

Vous pouvez également utiliser cette technique pour définir le nom du fichier en même temps.

Dans votre lien, incluez ?download=true&filename=My_Image_File.jpeg à la fin de votre href.

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