Das Chrome-Download-Attribut funktioniert nicht, um den ursprünglichen Namen zu ersetzen

Lesezeit: 6 Minuten

Benutzeravatar von Buffer Overflow
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

Benutzeravatar von Emanuel Vintilă
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.

Quelle

HTTP-Header Content-Disposition

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

    – Emanuel Vintilă

    26. Mai 2014 um 18:41 Uhr

  • Es scheint ein Fehler in Chrome ab Version 35 zu sein: code.google.com/p/chromium/issues/detail?id=373182

    – Pufferüberlauf

    28. Mai 2014 um 12:02 Uhr


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

Benutzeravatar von oware
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

Beispiel statt:

<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >

Das musst du machen:

<a href="/wp-content/uploads/file.mp4" download="file.mp4">

Dadurch wird es funktionieren

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

Das heißt, wenn der Server so antworten würde:

res.setHeader(
  "Content-disposition",
  "attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");

Die Datei würde gespeichert als Server-Dummy.pdf unabhängig vom Vorhandensein des Download-Attributs.

AKSHAYA KUMAR Satapathys Benutzeravatar
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.

<a download href="https://stackoverflow.com/questions/23872902/data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>

  • Dies ist leider auf 1 MB Daten beschränkt, zumindest in Chrome 73

    – Icec

    26. März 2019 um 10:57 Uhr

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

Benutzeravatar von Tunji Oyeniran
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')

Verweise

1446030cookie-checkDas Chrome-Download-Attribut funktioniert nicht, um den ursprünglichen Namen zu ersetzen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy