Erzwingen Sie, dass der Browser beim Klicken Bilddateien herunterlädt

100

Ich benötige den Browser, um die Bilddateien herunterzuladen, genau wie beim Klicken auf eine Excel-Tabelle.

Gibt es eine Möglichkeit, dies nur mit clientseitiger Programmierung zu tun?

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

Wie sollte es funktionieren, wenn eine Excel-Tabelle heruntergeladen wird (was tun Browser)?

Amit
quelle
7
Das downloadAttribut.
Šime Vidas
6
Der beste Weg, um sicherzustellen, dass eine Datei heruntergeladen wird, besteht darin, die Inhaltsdisposition auf der Serverseite festzulegen. Die meisten clientseitigen Lösungen sind nicht so zuverlässig.
Adeneo
1
Mögliches Duplikat: stackoverflow.com/questions/2408146/… ?
Karl-André Gagnon
Es gibt eine ähnliche Frage, die bereits für Sie beantwortet wurde: stackoverflow.com/a/6799284/1948211
dschu
Karl-Andre Gagnon: Bitte gehen Sie es richtig durch. [Ich hatte HTML 5 nicht markiert, da ich es nicht verwenden möchte] und ohne den Server zu berühren
Amit

Antworten:

173

Mit HTML5 können Sie Ihren Links das Attribut 'Download' hinzufügen.

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

Kompatible Browser fordern Sie dann auf, das Bild mit demselben Dateinamen herunterzuladen (in diesem Beispiel image.png).

Wenn Sie einen Wert für dieses Attribut angeben, wird dieser zum neuen Dateinamen:

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

UPDATE: Ab Frühjahr 2018 ist dies für Cross-Origin hrefs nicht mehr möglich . Wenn Sie also <a href="https://i.imgur.com/IskAzqA.jpg" download>auf einer anderen Domain als imgur.com erstellen möchten, funktioniert dies nicht wie beabsichtigt. Ankündigung von Chrome-Abwertungen und -Entfernungen

Richard Parnaby-King
quelle
Richard Parnaby-King: Mit dem HTML 5-Attribut kann es gemacht werden, aber ich muss es OHNE HTML5 oder ein anderes SERVER SIDE-Tool machen (wenn es möglich ist). Danke für die Hilfe :)
Amit
2
Noch nicht in allen Browsern vollständig unterstützt, aber es ist eine gute Lösung, wenn Sie sich nicht für IE oder Safari interessieren. caniuse.com/#feat=download
stacigh
Vielen Dank für eine HTML5-Lösung. Wie kann ich immer noch "Speichern unter" zulassen, damit ich vor dem Speichern einen Dateinamen eingeben kann?
Teleman
Kann ich nicht steuern, wo diese Datei heruntergeladen werden soll? Es wird nur heruntergeladen, um den Ordner direkt herunterzuladen. Ich möchte, dass es den lokalen Pfad der HTML-Datei verwendet.
Arjun Chiddarwar
1
@ArjunChiddarwar Nein, das führt zu Sicherheitslücken (stellen Sie sich vor, jemand speichert eine schädliche Datei direkt in Ihrem Windows-Ordner). Der Download-Pfad basiert auf den Browsereinstellungen. Beispielsweise wird Chrome standardmäßig in Ihren Download-Ordner heruntergeladen.
Richard Parnaby-King
96

Ich habe es geschafft, dies auch in Chrome und Firefox zum Laufen zu bringen, indem ich einen Link zum zu dokumentierenden Dokument angehängt habe.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
DrowsySaturn
quelle
2
Dies ist eigentlich eine sehr schöne Lösung für Web-Apps, bei denen Javascript überall zu finden ist. Funktioniert jedoch nur in Google Chrome (in meinem Test-Setup).
Pavel
Irgendwelche Ideen, wie man die Kompatibilität testen kann? Ich möchte diese Technik verwenden, muss aber auch andere Browser unterstützen. Daher muss ich eine Alternative anbieten (z. B. PDF in einem neuen Fenster öffnen oder einen Link zum Herunterladen), wenn dies nicht unterstützt wird. Hat jemand Glück damit gehabt?
Alexrussell
13
Tolle Lösung, danke! Beachten Sie, dass document.body.appendChild(link)es in Firefox nicht funktioniert , wenn Sie es weglassen . Es ist auch gut, erstellte Elemente mit document.body.removeChild(link);afterlink.click()
akn
8
beste Lösung. Um Müll in DOM zu vermeiden, verwenden SiesetTimeout( function () { link.parentNode.removeChild( link ); },10 );
Mephiztopheles
1
Danke sollte die ausgewählte Antwort gewesen sein, da die Frage gestellt wurde, wie es in JAVASCRIPT gemacht wird.
Codehelp4
33

Leeroy & Richard Parnaby-King:

UPDATE: Ab Frühjahr 2018 ist dies für herkunftsübergreifende hrefs nicht mehr möglich. Wenn Sie also auf einer anderen Domain als imgur.com erstellen möchten, funktioniert dies nicht wie beabsichtigt. Ankündigung von Chrome-Abwertungen und -Entfernungen

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();
}
iXs
quelle
2
Bild wird heruntergeladen, aber nicht geöffnet, wie angegeben "Bild ist kaputt"
Picacode
18

Update Frühjahr 2018

<a href="/path/to/image.jpg" download="FileName.jpg">

Obwohl dies weiterhin unterstützt wird, hat Chrome diese Funktion ab Februar 2018 für das Cross-Origin-Download deaktiviert. Dies bedeutet, dass dies nur funktioniert, wenn sich die Datei unter demselben Domainnamen befindet.

Nach dem neuen Update von Chrome, mit dem das domänenübergreifende Herunterladen deaktiviert wurde, habe ich eine Problemumgehung für das Herunterladen domänenübergreifender Bilder gefunden. Sie können dies in eine Funktion ändern, die Ihren Anforderungen entspricht. Möglicherweise können Sie den Bild-MIME-Typ (JPEG, PNG, GIF usw.) mit etwas mehr Recherche abrufen, wenn dies erforderlich ist. Möglicherweise gibt es auch bei Videos eine Möglichkeit, etwas Ähnliches zu tun. Hoffe das hilft jemandem!

Leeroy & Richard Parnaby-King:

UPDATE: Ab Frühjahr 2018 ist dies für herkunftsübergreifende hrefs nicht mehr möglich. Wenn Sie also auf einer anderen Domain als imgur.com erstellen möchten, funktioniert dies nicht wie beabsichtigt. Ankündigung von Chrome-Abwertungen und -Entfernungen

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>

Riley Bell
quelle
Es sieht so aus, als ob dieser Code das Bild in einen Pixelpuffer im Browserspeicher decodiert und es dann als jpeg / png / gif neu codiert und dann in eine Daten-URL kapselt, die dann hoffentlich lokal gespeichert wird. Wenn ja, bedeutet dies, dass alle Metadaten aus der Bilddatei verloren gehen. Auch das Neucodieren von JPEG verliert an Qualität und hat ein schlechteres Verhältnis von Qualität zu Bytezahl. Trotzdem gut zu wissen. Danke für das Teilen.
Stéphane Gourichon
14

Ein moderner Ansatz mit Promise und async / await:

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

dann

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);
}

Dokumentation finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Emerica
quelle
13
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     
Sadi
quelle
5
Safari-Browser unterstützt kein Download-Attribut
Pranav Labhe
11

Dies ist eine allgemeine Lösung für Ihr Problem. Es gibt jedoch einen sehr wichtigen Teil, dass die Dateierweiterung mit Ihrer Codierung übereinstimmen sollte. Und natürlich sollte dieser Inhaltsparameter der Funktion downlowadImage eine Base64-codierte Zeichenfolge Ihres Bildes sein.

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,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" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>

Hakobpogh
quelle
3
Bitte fügen Sie Ihrer Antwort eine kurze Erklärung hinzu, um sie für die Person relevant zu machen, die sie gefragt hat
ALTER
1
link.href = 'data: application / octet-stream' + encodeURIComponent (address) dies beschädigt die Datei und kann daher nicht geöffnet werden, kann nicht vorschlagen, warum es so ist
OM The Eternity
Ja, diese Antwort verdient es, die beste zu sein! Der fehlende Teil für mich war das "cleanUrl" -Ding, das fehlerhafte Daten erzeugte und die Datei beschädigte.
Iulian Pinzaru
2

Versuche dies:

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

Im Jahr 2020 verwende ich Blob , um eine lokale Kopie des Bildes zu erstellen, die der Browser als Datei herunterladen wird. Sie können es auf dieser Seite testen .

Geben Sie hier die Bildbeschreibung ein

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);
Petr Tripolsky
quelle
Es sieht so aus, als ob dieser Code das Bild in einen Pixelpuffer (Canvas) im Browserspeicher decodiert und es dann als jpeg / png / gif neu codiert und dann in eine Daten-URL einkapselt, die dann hoffentlich lokal gespeichert wird. Wenn ja, bedeutet dies, dass alle Metadaten aus der Bilddatei verloren gehen. Auch das Neucodieren von JPEG verliert an Qualität und hat ein schlechteres Verhältnis von Qualität zu Bytezahl. Trotzdem gut zu wissen. Danke für das Teilen.
Stéphane Gourichon
0
<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>
Engr. Zardari
quelle
0

Sie können diese Datei direkt mit dem Ankertag ohne viel Code herunterladen .
Kopieren Sie das Snippet und fügen Sie es in Ihren Texteditor ein und probieren Sie es aus ...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>

Vinod
quelle
2
Bitte fügen Sie weitere Details hinzu, z. B. wo dieser Code verwendet werden kann.
Maciej S.
-2

Was ist mit der Funktion .click () und dem Tag?

(Komprimierte Version)

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

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

Jetzt können Sie es mit js auslösen. Es öffnet auch nicht wie andere Beispiele Bild- und Textdateien!

(js-Funktionsversion)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>

Giftiges Flüstern
quelle
-4

ich habe das gefunden

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

hat bei mir nicht funktioniert. Ich bin mir nicht sicher warum.

Ich habe festgestellt, dass Sie ?download=trueam Ende Ihres Links einen Parameter einfügen können, um einen Download zu erzwingen. Ich glaube, ich habe bemerkt, dass diese Technik von Google Drive verwendet wird.

Fügen Sie in Ihren Link ein ?download=trueam Ende Ihrer href ein.

Sie können diese Technik auch verwenden, um gleichzeitig den Dateinamen festzulegen.

Fügen Sie in Ihren Link ?download=true&filename=My_Image_File.jpegam Ende Ihrer href ein.

Mufasa
quelle
2
? download = true wird an Google Drive übergeben, um den Server anzuweisen, den richtigen Header zum Herunterladen des Bildes zu senden. Es ist nichts, was in einer anderen Umgebung funktionieren würde, wenn es nicht speziell so eingerichtet wurde.
Muncherelli
-15

Sie müssen dazu kein js schreiben, verwenden Sie einfach:

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

Und der Browser selbst lädt das Bild automatisch herunter.

Wenn es aus irgendeinem Grund nicht funktioniert, fügen Sie das Download-Attribut hinzu. Mit diesem Attribut können Sie einen Namen für die herunterladbare Datei festlegen:

<a href="path_to/image.jpg" download="myImage">Download image</a>
António Regadas
quelle
Ein Link zum Bild öffnet das Bild nur im selben Fenster, es sei denn, Ihr Browser ist anders konfiguriert. Das downloadAttribut wird nicht in allen Browsern unterstützt.
Entwurf durch Adrian