Force-download GET-Anforderung mit axios

Ich bin mit vuejs 2 + axios.
Ich brauche zum senden einer get-Anforderung, einige Parameter zu server und in einer PDF-Datei als Antwort. Server verwendet Laravel.

So

axios.get(`order-results/${id}/export-pdf`, { params: { ... }})

macht eine erfolgreiche Anfrage, aber es startet nicht zwingen, herunterladen, obwohl die server wieder richtigen Header.

Ich denke, dies ist eine typische situation, wenn Sie brauchen, um, sagen wir, in form einer PDF-Bericht und einige Filter zum server. Also, wie könnte es erreicht werden?

Update

So, ich habe tatsächlich eine Lösung gefunden. Aber den gleichen Ansatz hat nicht funktioniert mit axios, weiß nicht, warum, das ist, warum ich roh verwendet XHR-Objekt. So die Lösung ist, erstellen Sie ein blob-Objekt und Benutzer createUrlObject Funktion. Beispiel:

let xhr = new XMLHttpRequest()
xhr.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = 'arraybuffer'

xhr.onload = function(e) {
  if (this.status === 200) {
    let blob = new Blob([this.response], { type:"application/pdf" })
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'Results.pdf'
    link.click()
  }
}

Wichtig: Sie sollten array buffer als Antwort geben

Jedoch der gleiche code geschrieben axios zurück PDF ist leer:

axios.post(`order-results/${id}/export-pdf`, {
  data,
  responseType: 'arraybuffer'
}).then((response) => {
  console.log(response)

  let blob = new Blob([response.data], { type: 'application/pdf' } ),
      url = window.URL.createObjectURL(blob)

  window.open(url); //Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})

InformationsquelleAutor der Frage Victor | 2017-04-16

  1. 32

    Du bist immer leere PDF 'Ursache, die keine Daten an den server übergeben wird. Sie können versuchen, die übergabe von Daten mithilfe von data-Objekt wie folgt

    `axios.post(`order-results/${id}/export-pdf`, {
  data: {
   firstName: 'Fred'
 }
  responseType: 'arraybuffer'
}).then((response) => {
  console.log(response)

  let blob = new Blob([response.data], { type: 'application/pdf' } ),
      url = window.URL.createObjectURL(blob)

  window.open(url); //Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})`

    Übrigens ich muss vielen Dank für zeigt mir den Hinweis zum download der pdf-Datei von Antwort. Thank ya 🙂

                    var dates = {
                    fromDate: 20/5/2017,
                    toDate: 25/5/2017
                }

    Die Art und Weise, in der ich verwendet habe, ist,

                axios({
              method:'post',
              url:'/reports/interval-dates',
              responseType:'arraybuffer',
              data: dates
            })
              .then(function(response) {
                let blob = new Blob([response.data], { type:   'application/pdf' } )
                let link = document.createElement('a')
                link.href = window.URL.createObjectURL(blob)
                link.download = 'Report.pdf'
                link.click()

            });

    InformationsquelleAutor der Antwort Roshimon

  2. 2

    Versuchen Sie dies:
    Es funktioniert perfekt für mich, mit Kompatibilität für Internet Explorer 11 (createObjectURL funktioniert nicht auf Explorer 11)

    axios({
  url: 'http://vvv.dev',
  method: 'GET',
  responseType: 'blob', //important
}).then((response) => {
  if (!window.navigator.msSaveOrOpenBlob){
    //BLOB NAVIGATOR
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'download.pdf');
    document.body.appendChild(link);
    link.click();
  }else{
    //BLOB FOR EXPLORER 11
    const url = window.navigator.msSaveOrOpenBlob(new Blob([response.data]),"download.pdf");
  }
});

    https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

    InformationsquelleAutor der Antwort gtamborero

  3. 1

    Ich glaube nicht, dass es möglich ist, dies zu tun in der axios oder auch AJAX. Die Datei wird im Speicher gehalten, d.h. Sie können nicht speichern Sie die Datei auf der Festplatte. Das ist, weil JavaScript nicht die Interaktion mit der Festplatte. Das wäre ein ernstes Sicherheitsproblem und es ist blockiert in allen gängigen Browsern.

    Bauen Sie Ihre URL in front-end und laden Sie es in der folgenden Weise:

     var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..' 

 window.open(url, '_blank');

    Hoffe, das hilft!

    InformationsquelleAutor der Antwort Deepak

  4. 0

    Ich hatte ähnliche Probleme - ich landete link und den Download von dort.

    Ich mehr details, wie in der Antwort auf einem anderen stackoverflow-Frage.

    InformationsquelleAutor der Antwort Anthony

Schreibe einen Kommentar