Heim >Web-Frontend >js-Tutorial >Wie kann ich mithilfe von JavaScript oder jQuery programmgesteuert einen Dateidownload in einem neuen Tab oder Fenster auslösen?

Wie kann ich mithilfe von JavaScript oder jQuery programmgesteuert einen Dateidownload in einem neuen Tab oder Fenster auslösen?

DDD
DDDOriginal
2024-12-20 04:27:09802Durchsuche

How Can I Programmatically Trigger a File Download in a New Tab or Window Using JavaScript or jQuery?

So initiieren Sie einen Dateidownload mit JavaScript/jQuery

Szenario:

Sie möchten einen Dateidownload auslösen, wenn Ein Benutzer klickt mithilfe von JavaScript oder jQuery auf ein bestimmtes HTML-Element, ohne jedoch den aktuellen Seiteninhalt zu ersetzen. Stattdessen möchten Sie den Download in einem neuen Fenster oder Tab öffnen.

Lösungen:

1. Verwenden eines unsichtbaren Iframes:

  • Erstellen Sie ein unsichtbares Iframe-Element mit einer nicht standardmäßigen ID, z. B. „my_iframe“.
  • Verwenden Sie das „src“-Attribut des Iframes um die URL der Datei anzugeben.
<script>
  function Download(url) {
    document.getElementById("my_iframe").src = url;
  }
</script>

2. Einen Download erzwingen:

  • Um den Browser zu zwingen, eine Datei herunterzuladen, die er sonst rendern könnte (z. B. HTML oder Text), weisen Sie den Server an, seinen MIME-Typ auf einen bedeutungslosen Wert zu setzen, z. B „application/x-please-download-me“ oder „application/octet-stream.“

3. Öffnen einer Datei in einem neuen Tab (jQuery):

  • Setzen Sie das „target“-Attribut des HTML-Elements auf „_blank“ und geben Sie die URL der Datei im „href“-Attribut an.
$('a#someID').attr({target: '_blank', href: 'http://localhost/directory/file.pdf'});

Durch Klicken auf diesen Link wird die Datei in einem neuen Tab oder Fenster heruntergeladen, ohne dass sich dies auf die aktuelle Seite auswirkt.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript oder jQuery programmgesteuert einen Dateidownload in einem neuen Tab oder Fenster auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn