Post komplexe Daten mit Ajax und öffnen zurückgegebene PDF in einem neuen Fenster

Question

Ich muss JQuery Ajax verwenden, um ein komplexes und sensibles Datenobjekt (geschachtelte Objekte, Arrays und persönlich identifizierbare Informationen) auf meinem Server, wo ein PDF erzeugt und an den Kunden zurückgegeben. Der Client-Browser sollte dann das PDF in einem neuen Fenster öffnen.

Aufgrund der Art der Daten kann und darf die Anfrage keine codierte URL sein - sie muss die Daten als JSON-Text enthalten.

Die anderen Fragen/Antworten zu diesem Thema lösten das Problem in meinem Fall nicht oder nicht vollständig.

Answer 1

Lösung

1. POST mit den Daten, die in dem Körper als JSON.
2. Setzen Sie die erwartete Content-Type der Antwort auf arraybuffer (auf dem Client und Server).
3. Wenn die Anforderung erfolgreich abgeschlossen wurde, konvertieren Sie die Antwort in eine Blob.
4. Erstellen Sie eine Objekt-URL zum Blob und öffnen Sie es in einem neuen Fenster.

Hinweise

• JQuery Ajax does not support die arraybufferContent-Type so die Basis JavaScript xhr muss verwendet werden (wenn Sie keine anderen Optionen haben Sie).
• Internet Explorer verfügt über eine eigene Funktionalität für die Handhabung und Anzeige von Blob, so dass ein spezieller Fall benötigt wird.
• Supported browsers nicht IE9 enthalten

-Code

RequestPdf = function (url, data) { 
 
    var request = new XMLHttpRequest(), file, fileURL; 
 
    request.open("POST", url); 
 
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
 
    request.responseType = "arraybuffer"; 
 
    request.send(data); 
 
    request.onreadystatechange = function() { 
 
     if (request.readyState === 4 && request.status === 200) { 
 
      file = new Blob([request.response], { type: 'application/pdf' }); 
 
      if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE 
 
       window.navigator.msSaveOrOpenBlob(file); 
 
      } else { 
 
       fileURL = URL.createObjectURL(file); 
 
       window.open(fileURL); 
 
      } 
 
     } 
 
    }; 
 
};