How to initiate a download via a GET request in axios

Question

How to initiate a download via a GET request in axios

I am currently utilizing Vue.js 2 with Axios to send a GET request and pass parameters to the server in order to retrieve a PDF as a response. The server is powered by Laravel.

Having issues with force downloading the PDF even though the correct headers are being returned from the server.

This scenario is common when generating a PDF report and sending filters to the server. How can this be achieved effectively?

Update

I have found a solution that works using raw XHR object instead of Axios. By creating a blob object and utilizing the `createUrlObject` function, I was able to successfully download the PDF file. Here's a 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: ensure that the responseType is set to array buffer

However, when attempting the same code with Axios, the returned PDF file 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);
})

javascript vue.js vuejs2 axios

Answer 1

Answer №1

When you receive an empty PDF file, it's likely because no data is being passed to the server. To rectify this, you can transmit data using a data object as shown below:

  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) // I tried various methods like link.click, iframe, and others while experimenting with different approaches
    })

I must express my gratitude for giving me the hint on how to download a PDF from the response. Thank you so much :)

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

This is how I implemented it:

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

Answer 2

When you receive an empty PDF file, it's likely because no data is being passed to the server. To rectify this, you can transmit data using a data object as shown below:

  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) // I tried various methods like link.click, iframe, and others while experimenting with different approaches
    })

I must express my gratitude for giving me the hint on how to download a PDF from the response. Thank you so much :)

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

This is how I implemented it:

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

Answer 3

Answer №2

Give this a try: I've had great success with this code snippet, especially when dealing with compatibility issues in Internet Explorer 11 (keep in mind that createObjectURL doesn't function on Explorer 11)

axios({
  url: 'http://vvv.dev',
  method: 'GET',
  responseType: 'blob', // make sure to include this
}).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");
  }
});

Visit this link for more information and examples

Answer 4

Give this a try: I've had great success with this code snippet, especially when dealing with compatibility issues in Internet Explorer 11 (keep in mind that createObjectURL doesn't function on Explorer 11)

axios({
  url: 'http://vvv.dev',
  method: 'GET',
  responseType: 'blob', // make sure to include this
}).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");
  }
});

Visit this link for more information and examples

Answer 5

Answer №3

After trying various methods mentioned earlier, I encountered a popup block warning issue in my browser. Fortunately, the following code snippet resolved the problem for me:

axios.get(url, {responseType: 'arraybuffer'})
   .then(function (response) {
     var headers = response.headers();
     var blob = new Blob([response.data],{type:headers['content-type']});
     var link = document.createElement('a');
     link.href = window.URL.createObjectURL(blob);
     link.download = "Your_file_name";
     link.click();
});

Answer 6

After trying various methods mentioned earlier, I encountered a popup block warning issue in my browser. Fortunately, the following code snippet resolved the problem for me:

axios.get(url, {responseType: 'arraybuffer'})
   .then(function (response) {
     var headers = response.headers();
     var blob = new Blob([response.data],{type:headers['content-type']});
     var link = document.createElement('a');
     link.href = window.URL.createObjectURL(blob);
     link.download = "Your_file_name";
     link.click();
});

Answer 7

Answer №4

It seems like achieving this functionality using axios or AJAX is not feasible. The file must remain in the browser's memory as saving it to disk is not allowed due to security reasons. JavaScript does not have the capability to interact with the disk, which is restricted by major browsers for security purposes.

One alternative method is to construct the URL on the front-end and trigger a download as shown below:

 var url = 'http://example.com/order-details/' + orderId + '/export-pdf?' + '..parameters..' 

 window.open(url, '_blank');

I hope you find this solution helpful!

Answer 8

It seems like achieving this functionality using axios or AJAX is not feasible. The file must remain in the browser's memory as saving it to disk is not allowed due to security reasons. JavaScript does not have the capability to interact with the disk, which is restricted by major browsers for security purposes.

One alternative method is to construct the URL on the front-end and trigger a download as shown below:

 var url = 'http://example.com/order-details/' + orderId + '/export-pdf?' + '..parameters..' 

 window.open(url, '_blank');

I hope you find this solution helpful!

Answer 9

Answer №5

Here is a piece of code that has been effective for me:

const request = new XMLHttpRequest();
request.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true);
request.setRequestHeader("Authorization", 'Bearer ' + this.token());
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.responseType = 'arraybuffer';
request.send();
request.onload = function(e) {
    if (this.status === 200) {
        const blob = new Blob([this.response], { type: "application/pdf" });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'Results.pdf';
        link.click();
    }
}

}

Answer 10

Here is a piece of code that has been effective for me:

const request = new XMLHttpRequest();
request.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true);
request.setRequestHeader("Authorization", 'Bearer ' + this.token());
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.responseType = 'arraybuffer';
request.send();
request.onload = function(e) {
    if (this.status === 200) {
        const blob = new Blob([this.response], { type: "application/pdf" });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'Results.pdf';
        link.click();
    }
}

}

Answer 11

Answer №6

Dealing with the same problems led me to generate a link and obtain the file through that method.

For further insight into my process, refer to the response posted on a different stackoverflow thread.

Answer 12

Dealing with the same problems led me to generate a link and obtain the file through that method.

For further insight into my process, refer to the response posted on a different stackoverflow thread.

How to initiate a download via a GET request in axios

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Using Foreach to reference data as "this"

Turn off the background when the automatic popup box appears

Error encountered when using the module export in Node.js

Navigating through search results on an XML page using jQuery

Utilizing AngularJS to Retrieve Row Information Upon Button Selection

Tips for utilizing date objects instead of date 'strings' while still obtaining the desired outcome

Performing addition in Angular 2 with the help of TypeScript

Using NodeJS and Express together with Ajax techniques

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

Embed a Link Fill Script into an Input Form

Tips for setting up a webpacked vue.js application with an express/koa backend!

What is the significance of incorporating vinyl-source-stream into gulp in my workflow?

Mongoose Raises an Error When a Nonexistent Key is Detected

Contrasting the addition of an onClick listener through Jquery versus utilizing an HTML onclick attribute

Can you always rely on promises being fulfilled?

The absence of a defined window - react-draft-wysiwyg integration with Next.js (SSR) is causing issues

"How can I open a DOCX file in a new window using JavaScript and then close the window

Receiving an error message stating "Uncaught SyntaxError: Unexpected token <" in React while utilizing the AWS SDK

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Determining If Props Have Been Undefined In React