Force download GET request using axios

Question

I'm using vuejs 2 + axios. I need to send a get request, pass some params to server, and get a PDF as a response. Server uses Laravel.

So

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

makes successful request but it does not start force downloading, even though server returns correct headers.

I think this is a typical situation when you need to, say, form a PDF report and pass some filters to server. So how could it be accomplished?

Update

So actually I found a solution. However the same approach didn't work with axios, don't know why, that's why I used raw XHR object. So the solution is to create a blob object and user createUrlObject function. Sample example:

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()   } } 

Important: you should have array buffer as response type

However, the same code written in axios returns PDF which is empty:

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 }) 

Answer 1

You're getting empty PDF 'cause no data is passed to the server. You can try passing data using data object like this

  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      })

By the way I gotta thank you so much for showing me the hint in order to download pdf from response. Thank ya :)

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

The way in which I have used is,

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()  })