Das Chrome-Download-Attribut funktioniert nicht, um den ursprünglichen Namen zu ersetzen
Lesezeit: 6 Minuten
Pufferüberlauf
Ich habe seit der neuesten Version ein unerwartetes Verhalten von Chrome festgestellt: Während in Firefox dieser Code einwandfrei funktioniert:
<a
id="playlist"
class="button"
download="Name.xspf"
href="data:application/octet-stream;base64,PD94ANDSOON"
style="display: inline;">
Download Me
</a>
Es funktioniert nicht in Chrome (einfach eine Datei mit dem Namen “Download” herunterladen), hat aber vorher ziemlich gut funktioniert. Was muss ich ändern, dass es wieder funktioniert?
Dies passiert auch, wenn Sie Ihre Website ohne Server (wie einen Localhost) öffnen, die Installation und Verwendung der Live Server-Erweiterung von Ritiwick Dey in VS-Code löst das Problem, Sie können auch jeden anderen Server wie Apache oder xampp verwenden, aber es wäre einfacher und schneller, um die Live Server-Erweiterung von VS Code zu installieren.
– Rishav Jha
28. Juni 2021 um 1:11 Uhr
Emanuel Vintilă
Nach einiger Recherche habe ich dein Problem endlich gefunden.
<a>Download-Attribut von :
Wenn der HTTP-Header Content-Disposition: vorhanden ist und einen anderen Dateinamen als dieses Attribut angibt, hat der HTTP-Header Vorrang vor diesem Attribut.
Wenn dieses Attribut vorhanden ist und Content-Disposition: auf Inline gesetzt ist, gibt Firefox Priorität Content-Dispositionwie für den Fall des Dateinamens, während Chrome dem Download-Attribut Vorrang einräumt.
Mein Server scheint “Content-Disposition” nicht zu senden und wie von Ihnen beschrieben, würde Firefox die Datei nicht korrekt herunterladen, aber mein Problem ist umgekehrt: Chrome akzeptiert das Download-Attribut nicht, während Firefox dies tut. Selbst wenn ich nur eine einfache HTML-Datei nur mit diesem Inhalt erstelle (und als Datei-URL öffne), funktioniert sie nicht in Chrome, sondern in Firefox. Es hat auch funktioniert, bevor ich Chrome aktualisiert habe (Version 35.0.1916.114 m)
– Pufferüberlauf
26. Mai 2014 um 17:08 Uhr
Es funktioniert auch nicht in Chrome für mich … Ich habe einige Websites mit einer “Try it” -Seite durchsucht, aber weder ihre Beispiele haben nicht funktioniert, noch einige JSFIDDLE, die ich versucht habe zu erstellen. Das einzige, was funktionierte, war Dieses hier auf W3Schools.
@MrMesees Wenn ich mich richtig erinnere, berücksichtigen Browser das Download-Attribut nicht mehr, es sei denn, das href zeigt auf eine Ressource, die sich auf demselben Ursprung befindet. Siehe auch die Antwort unten
– Emanuel Vintilă
7. Februar 2017 um 19:27 Uhr
Das funktioniert, wenn Sie die Kontrolle über den Server haben, ist aber keine Lösung für das Front-End. Ich kann immer noch nicht herausfinden, wie man es in HTML macht, wenn der Server das nicht hat Content-Disposition Header.
– RyanWalker
20. Mai 2019 um 21:19 Uhr
Beim Lesen der Kommentare hatte ich das gleiche Problem wie @buffer-overflow und fand dies in der Ausgabe:
Ich vermute, dass die Webseite und der Download unterschiedlichen Ursprungs sind. Wir berücksichtigen nicht mehr den vorgeschlagenen Dateinamen des Download-Attributs für ursprungsübergreifende Anfragen. Ein Klick auf den Link löst dennoch einen Download aus. Der Dateiname ergibt sich aber nur aus rein serverabhängigen Faktoren (zB Content-Disposition-Header in der Response und der URL).
Also keine Chance, dass ich es zum Laufen bringen könnte … 🙁
In der W3C-Empfehlung von HTML5 und HTML 5.1 steht nichts über diese Einschränkung, aber Sie finden sie in der Mozilla-Referenz. “Dieses Attribut funktioniert nur für URLs gleichen Ursprungs.” – aus developer.mozilla.org/en/docs/Web/HTML/Element/a#Attributes
– Quidn
2. April 2017 um 19:43 Uhr
Ich habe das gleiche Problem mit Chrome Version 57 trotz nein Content-Disposition Kopfzeile ist vorhanden. Die einzige Lösung, die ich gefunden habe, war, den Server dazu zu bringen, die Content-Disposition Header und geben Sie dort den Dateinamen an.
– Lesen
12. April 2017 um 7:59 Uhr
Ich sehe ein völlig anderes Verhalten … es ist nicht einmal versuchen herunterzuladen, stattdessen tut es so, als ob das Download-Attribut nicht vorhanden wäre, und ersetzt die Seite durch das neue Bild!
– Michael
31. März 2020 um 2:27 Uhr
wissen
Ich hatte dieses Problem mit WordPress, das Problem ist, dass WordPress den vollständigen Pfad der Datei generiert und Sie im a-Tag den vollständigen Domänennamen entfernen und einen relativen Pfad hinzufügen müssen
Dies hat nichts mit der ursprünglichen Frage zu tun, hat aber mein Leben gelöst 🙂
– Herr Louen
19. März 2021 um 14:35 Uhr
Ebenfalls. Es scheint, dass Chrome vielleicht davon ausgeht, dass es von einer anderen Domain stammt, wenn die gesamte Domain angegeben ist, auch wenn das nicht stimmt.
– Bischbashbosch
14. Juli 2021 um 10:52 Uhr
Dies ist das aktuelle Verhalten in Chrome ab 16. August 2021
Wenn Sie eine API so aufrufen: http://localhost:9000/api/v1/service/email/attachment/dummy.pdf
Chrome versucht, den letzten Wert des Pfadparameters zu analysieren und ignoriert alle übergebenen Werte attachment Attribut von a verlinken wenn Content-Disposition nicht eingestellt ist oder eingestellt ist inline vom Server, in diesem Fall trägt die PDF-Datei den Namen dummy.pdf
Wenn Content-Disposition ist eingestellt auf attachmentdann speichert Chrome die Datei mit der filename Wert aus dem Content-Disposition-Header.
Die Datei würde gespeichert als Server-Dummy.pdf unabhängig vom Vorhandensein des Download-Attributs.
AKSHAYA KUMAR Satapathie
Ich habe eine einfache Lösung für dieses Problem. Sie müssen nur Ihre HTML-Datei mit xampp-Steuerung und so weiter auf einem Server wie Apache ablegen. Weil das Download-Attribut ordnungsgemäß über einen Server funktioniert.
Dies ist leider auf 1 MB Daten beschränkt, zumindest in Chrome 73
– Icec
26. März 2019 um 10:57 Uhr
Sachin
Betrachten Sie die Dateien über einen Webserver oder Ihr lokales Dateisystem – Beginnt die URL-Leiste des Browsers mit http:// oder file:///? Ich habe gerade einige Tests in Chrome durchgeführt, und obwohl die Datei heruntergeladen wird, wird der Wert des Download-Attributs nicht berücksichtigt, wenn Sie die lokale Datei verwenden.
Wenn Sie anfangen, es auf einem Webserver zu hosten, wird dies funktionieren. Wenn Sie dies nur für sich selbst auf Ihrem Computer tun, sehen Sie sich WAMP für Windows oder MAMP für macOS an, um mit Apache zu beginnen.
Dies ist leider auf 1 MB Daten beschränkt, zumindest in Chrome 73
– Icec
26. März 2019 um 10:57 Uhr
Tunji Oyeniran
Ich empfehle die Verwendung von file-saver NPM-Paket zum Implementieren oder Erzwingen des Downloads.
// 1.
npm i file-saver // install via npm or
yarn add file-saver // install via yarn
// 2.
import { saveAs } from 'file-saver'
// 3.
saveAs('https://httpbin.org/image', 'image.jpg')
Dies passiert auch, wenn Sie Ihre Website ohne Server (wie einen Localhost) öffnen, die Installation und Verwendung der Live Server-Erweiterung von Ritiwick Dey in VS-Code löst das Problem, Sie können auch jeden anderen Server wie Apache oder xampp verwenden, aber es wäre einfacher und schneller, um die Live Server-Erweiterung von VS Code zu installieren.
– Rishav Jha
28. Juni 2021 um 1:11 Uhr