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)?
javascript
jquery
html
Amit
quelle
quelle
download
Attribut.Antworten:
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
href
s 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 -Entfernungenquelle
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.
quelle
document.body.appendChild(link)
es in Firefox nicht funktioniert , wenn Sie es weglassen . Es ist auch gut, erstellte Elemente mitdocument.body.removeChild(link);
afterlink.click()
setTimeout( function () { link.parentNode.removeChild( link ); },10 );
quelle
Update Frühjahr 2018
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!
quelle
Ein moderner Ansatz mit Promise und async / await:
dann
Dokumentation finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
quelle
quelle
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.
quelle
Versuche dies:
quelle
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 .
quelle
quelle
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 ...!
quelle
Was ist mit der Funktion .click () und dem Tag?
(Komprimierte Version)
Jetzt können Sie es mit js auslösen. Es öffnet auch nicht wie andere Beispiele Bild- und Textdateien!
(js-Funktionsversion)
quelle
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=true
am 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=true
am 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.jpeg
am Ende Ihrer href ein.quelle
Sie müssen dazu kein js schreiben, verwenden Sie einfach:
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:
quelle
download
Attribut wird nicht in allen Browsern unterstützt.