Wie kann Ajax Dialoge zum Speichern von Dateien asynchron auslösen, um die Benutzererfahrung zu verbessern?

Asynchrone Dateidownloads mit Ajax: Entsperren des Dateispeicherdialogs

In diesem digitalen Zeitalter sind Dateidownloads allgegenwärtig. Mit den Funktionen von Ajax können wir das Benutzererlebnis verbessern, indem wir Dateidownloads asynchron zulassen, ohne die Webseiteninteraktionen zu unterbrechen.

Das Problem

Bei Verwendung einer Struts2-Aktion für serverseitige Dateien Beim Herunterladen und Aufrufen der Aktion über jQuery werden die Daten in einem Binärstream abgerufen. Das gewünschte Ergebnis besteht jedoch darin, einen Dateispeicherdialog auszulösen, der es Benutzern ermöglicht, die Datei lokal zu speichern.

Moderne Browserlösung

Für moderne Browser gilt der folgende Ansatz empfohlen:

<br>fetch('your-download-endpoint').then(resp => resp.blob()).then(blob => {<br> const url = window.URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.style .display = 'none';<br> a.href = url;<br> a.download = 'your-file-name'; // Geben Sie den gewünschten an Dateiname<br> document.body.appendChild(a);<br> a.click();<br> window.URL.revokeObjectURL(url);<br>});<br>

Dieser Code erstellt eine temporäre URL für die Blob-Daten, die dann an ein Ankerelement angehängt wird, das an den Dokumenttext angehängt wird. Durch Klicken auf dieses versteckte Ankerelement wird der Dialog zum Speichern der Datei ausgelöst, und sobald der Download abgeschlossen ist, wird die temporäre URL widerrufen.

Überlegungen

Dieser Ansatz funktioniert zwar gut für Bei kleinen bis mittelgroßen Dateien ist es wichtig, den Speicherverbrauch bei sehr großen Downloads zu berücksichtigen. Wenn Sie mit großen Dateien rechnen, sind alternative Techniken wie die Verwendung eines Iframes und eines Cookies möglicherweise besser geeignet.

Das obige ist der detaillierte Inhalt vonWie kann Ajax Dialoge zum Speichern von Dateien asynchron auslösen, um die Benutzererfahrung zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!