I am using this approach for downloading a pdf file from server (laravel 8 (api sanctum) + vue 3)
In the vue component I have this function that downloads the file
const onDownloadDocument = (id) => {
axios.post('/api/document/download', {id: id},{
responseType: 'blob'
}).then(response => {
let filename = response.headers['content-disposition'].split('filename=')[1]
dLink.value.href = window.URL.createObjectURL(response.data)
dLink.value.setAttribute('download',filename)
dLink.value.click()
}).catch(error => {
console.log(error)
})
where dLink is a link ref
const dLink = ref(null)
in template:
<a ref="dLink"/>
It works this approach until today.... after I updated the project (composer update and npm update)
Now when click to download the file (call the onDownloadDocument function) I get an error:
contract.js:1049 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'responseType')
Any idea why ?
The api backend return the file blob
return Storage::download($document->filename);
First you need to create a blob and put your response in it,
And as I said in my comment you don't need to attach to a real anchor tag, you can just create an element, attach it to the body, simulate the click and remove it immediately
const blob = new Blob([response], {type: 'application/pdf'})
if (window.navigator['msSaveOrOpenBlob']) {
window.navigator['msSaveBlob'](blob, filename)
}
else {
const elem = window.document.createElement('a')
elem.href = window.URL.createObjectURL(blob)
elem.download = filename
document.body.appendChild(elem)
elem.click()
document.body.removeChild(elem)
}
This worked for me, specify to axios that you are expecting a blog, and that's it:
axios({
url: 'http://localhost:5000/endpoint?',
method: 'GET',
responseType: 'blob', // <= important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
});