Ich verwende Axios für grundlegende HTTP-Anfragen wie get und post, und es funktioniert gut. Jetzt muss ich auch Excel-Dateien herunterladen können. Ist das mit Axios möglich? Wenn ja, hat jemand einen Beispielcode? Wenn nicht, was sonst kann ich in einer reaktiven Anwendung verwenden, um dasselbe zu tun?
Wenn die Antwort mit einer herunterladbaren Datei geliefert wird, sind die Antwortheader etwas wie
%Vor%Sie können eine separate Komponente erstellen, die einen versteckten Iframe enthält.
%Vor%Nun können Sie die URL der herunterladbaren Datei als Prop für diese Komponente übergeben. Wenn diese Komponente also Prop empfängt, wird sie erneut gerendert und die Datei wird heruntergeladen.
Bearbeiten: Sie können auch das Modul react-file-download verwenden .
%Vor%Hoffe das hilft:)
Das ist eigentlich noch komplexer, wenn Sie Dateien mit Axios und einigen Sicherheitsmitteln herunterladen wollen. Um zu verhindern, dass jemand anderes zu viel Zeit damit verbringt, dies herauszufinden, lassen Sie mich das durchgehen.
Sie müssen 3 Dinge tun:
%Vor%Diese Schritte sind meistens machbar - werden aber durch die Beziehung des Browsers zu CORS erheblich erschwert. Schritt für Schritt:
Wenn Transportsicherheit verwendet wird, kann JavaScript, das innerhalb eines Browsers ausgeführt wird, nur auf 6 der HTTP-Header zugreifen, die tatsächlich vom HTTP-Server gesendet werden. Wenn wir möchten, dass der Server einen Dateinamen für den Download vorschlägt, müssen wir den Browser darüber informieren, dass es "OK" ist, dass JavaScript Zugriff auf andere Header erhält, in denen der vorgeschlagene Dateiname transportiert wird.
Nehmen wir an, wir möchten, dass der Server den vorgeschlagenen Dateinamen in einem HTTP-Header namens X-Suggested-Filename übertragen soll. Der HTTP-Server teilt dem Browser mit, dass es OK ist, diesen empfangenen benutzerdefinierten Header dem JavaScript / Axios mit der folgenden Kopfzeile zugänglich zu machen:
%Vor%Die genaue Konfiguration Ihres HTTP-Servers zum Einrichten dieser Kopfzeile ist von Produkt zu Produkt unterschiedlich.
Siehe Ссылка für eine ausführliche Erklärung und detaillierte Informationen Beschreibung dieser Standard-Header.
Ihre serverseitige Service-Implementierung muss jetzt zwei Dinge ausführen:
%Vor%Dies geschieht auf unterschiedliche Weise, abhängig vom gewählten Technologie-Stack. Ich werde ein Beispiel mit dem JavaEE 7-Standard skizzieren, der einen Excel-Bericht ausgeben sollte:
%Vor%Der Dienst gibt jetzt das Binärdokument (in diesem Fall einen Excel-Bericht) aus, legt den korrekten Inhaltstyp fest - und sendet außerdem einen benutzerdefinierten HTTP-Header mit dem vorgeschlagenen Dateinamen zum Speichern des Dokuments.
Hier gibt es ein paar Fallstricke, also stellen wir sicher, dass alle Details richtig konfiguriert sind:
Die Skelett-Axios-Implementierung wäre dann etwas wie folgt:
%Vor%Meine Antwort ist ein totaler Hack - Ich habe gerade einen Link erstellt, der aussieht wie eine Schaltfläche und die URL dazu hinzufügt.
%Vor%Ich benutze die ausgezeichneten VueJs daher die merkwürdigen Annotierungen, aber diese Lösung ist Framework Agnostic. Die Idee würde für jedes HTML-basierte Design funktionieren.