web-dev-qa-db-de.com

Vue / HTML / JS, wie eine Datei mit dem Download-Tag in den Browser heruntergeladen wird

Diese Frage unterscheidet sich von der anderen angegebenen Antwort, da sich meine Frage auf VUE und if VUE) konzentriert und auch die Standardmethode verhindert.

Diese Frage ist spezifischer für HTML 5 "Download" zusammen mit VUE Bindung von: href und warum es nicht funktioniert, um das Standardbrowserverhalten beim Öffnen der Datei in einem neuen Tab zu verhindern.

Erwartetes Verhalten: Laden Sie die Datei in den Browser herunter

Tatsächliches Verhalten: Öffnet die Datei in einer neuen Registerkarte

Ausnahme: In einem neuen Tab werden nur Bilder, PDF- und Browser-kompatible Dateien geöffnet, andere Dateien wie .exe werden wie gewohnt heruntergeladen. Warum kann dieses Verhalten in HTML geändert werden?

Das Hinzufügen von target = "_ blank" löst das Problem nicht

<a :href="downloadById(item.url)" download>Download</a>

Wenn der obige Link angeklickt wird, wird die Datei in einem neuen Browser-Tab geöffnet. Ich muss dieses Standardverhalten verhindern und beim Klicken einen Download erzwingen. Das HTML 5-Tag "download" scheint nicht zu funktionieren, um dieses Problem zu lösen.

Chrome hat kürzlich das Download-Tag-Formular für domänenübergreifende Downloads verworfen. Hat vue einen Modifikator, um diesen Standard zu verhindern? Gibt es andere Möglichkeiten, die Datei entweder in Javascript oder in HTML herunterzuladen?

Eine vorgeschlagene Lösung besteht darin, die URL als arrayBuffer zu lesen und dann einen neuen Blob im DOM zu erstellen und dann ein Ankerelement zu erstellen und darauf zu klicken. Das scheint jedoch schwierig zu sein, einen Download einer Datei zu erzwingen.

Ich bin sicher, sie müssen eine sauberere Lösung sein, um eine Datei von einer URL herunterzuladen, es ist ein triviales Problem, in der Hoffnung auf eine einfache Lösung.

Vielen Dank.

8
Ricky-U

Eine weniger schwierige Möglichkeit, CORS-Probleme zu vermeiden, besteht darin, die Datei über eine XHR-Anfrage abzurufen und als Blob bereitzustellen:

Vorlage

<a
  :href="item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item.url)" />

Vue

methods: {
  downloadItem (url) {
    Axios.get(url, { responseType: 'blob' })
      .then(({ data }) => {
        const blob = new Blob([data], { type: 'application/pdf' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'Download.pdf'
        link.click()
      }).catch(error => console.error(error))
    })
  }
}

Ich habe Axios für mein Beispiel verwendet, aber Sie sollten in der Lage sein, jede gewünschte Bibliothek zu verwenden. Beachten Sie auch, dass sowohl der Mime-Typ des Blobs als auch der Name des Downloads der Einfachheit halber fest verdrahtet sind.

13
Lars Beck