Wie lade ich eine PDF-Datei mit Ajax herunter und öffne sie?

Herunterladen und Öffnen einer PDF-Datei mit Ajax

In der Webentwicklung ist es üblich, Dateien dynamisch zu generieren und auf den Client herunterzuladen. Der Umgang mit Dateidownloads mit Ajax kann schwierig sein, insbesondere bei Dateiformaten wie PDFs. Ein häufiges Problem ist das Herunterladen und Öffnen einer PDF-Datei mithilfe von Ajax-Aufrufen.

Problem:

Ein Benutzer verfügt über eine Aktionsklasse, die eine PDF-Datei generiert und den entsprechenden Inhaltstyp festlegt . Sie versuchen, diese Aktion über einen Ajax-Aufruf aufzurufen und die heruntergeladene PDF-Datei im Browser zu öffnen. Der Ajax-Aufruf führt jedoch zu einem Fehler: „Ihr Browser hat eine Anfrage gesendet, die dieser Server nicht verstehen konnte.“

Lösung:

Um dieses Problem erfolgreich zu beheben Laden Sie eine PDF-Datei herunter und öffnen Sie sie mit Ajax. Führen Sie die folgenden Schritte aus:

1. Generieren Sie die PDF-Datei: Generieren Sie in der Aktionsklasse die PDF-Datei mit Ihrer bevorzugten Bibliothek und legen Sie die entsprechende fest Inhaltstyp, wie Sie es bereits getan haben.

2. Verarbeiten Sie den Ajax-Aufruf in JavaScript:

   • Verwenden Sie das XMLHttpRequest-Objekt, um einen Ajax-Aufruf an zu initiieren Aktions-URL.
   • Setzen Sie die Anforderungsmethode entsprechend Ihrer Aktionsmethode auf „POST“ oder „GET“.

3. Verarbeiten Sie die Serverantwort:

   • Verarbeiten Sie in der Erfolgsrückruffunktion des Ajax-Aufrufs die Antwort des Servers.
   • Verwenden Sie die Blob-API, um einen neuen Blob zu erstellen, der die heruntergeladenen PDF-Daten darstellt.
   • Erstellen Sie ein Ankerelement () und legen Sie dessen href-Attribut auf die Objekt-URL des Blobs fest.
   • Legen Sie das Download-Attribut fest, um den gewünschten Dateinamen für die PDF-Datei anzugeben.
   • Lösen Sie das Klickereignis auf dem Ankerelement aus, um den Download zu starten und die PDF-Datei zu öffnen.

Hier ist ein Beispiel-JavaScript-Code, der diesen Ansatz demonstriert:

<code class="javascript">$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '<FILENAME_TO_SAVE_WITH_EXTENSION>';
    link.click();
  }
});</code>

Mit dieser Methode können Sie eine PDF-Datei erfolgreich mit Ajax herunterladen und öffnen und so die Dateiverarbeitungsfunktionen Ihrer Webanwendung optimieren.

Das obige ist der detaillierte Inhalt vonWie lade ich eine PDF-Datei mit Ajax herunter und öffne sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!