[FIXED] Download file from php server with vuejs

Issue

My application is running on CakePHP with vuejs as front end js framework.

I am making an axios request to server for generating the output file and file is generated in webroot folder of cakephp.

Api()
.get('/articles/downloadFile')
.then(response => {
});

How can I download the generated file through vuejs?

Solution

You need to pass responseType as blob in the axios call. Something like this

.get('/articles/downloadFile', {responseType: 'blob'})

And then, in when the promise resolves to generate a href element in the DOM and download the item.

.then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'image.png');
    document.body.appendChild(link);
    link.click();
})

I'm assuming that you are downloading an image, you need to change the name and the extension for your use case.

Here's a fiddle with a complete example.

NB: for this to work (even just the GET call) your CORS policy must allow this call.

Answered By - Radu Diță