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

-7voto

Et si vous utilisiez la fonction .click() et la balise ?

(Version compressée)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

Maintenant vous pouvez le déclencher avec js. Il n'ouvre pas non plus, comme d'autres exemples, les fichiers image et texte !

(version js-fonction)

function download(){
document.getElementById('downloadtag').click();
}

<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>

-17voto

António Regadas Points 353

Vous n'avez pas besoin d'écrire des js pour faire cela, utilisez simplement :

<a href="path_to/image.jpg" alt="something">Download image</a>

Et le navigateur lui-même téléchargera automatiquement l'image.

Si, pour une raison quelconque, cela ne fonctionne pas, ajoutez l'attribut download. Avec cet attribut, vous pouvez définir un nom pour le fichier téléchargeable :

<a href="path_to/image.jpg" download="myImage">Download image</a>

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