Recently, I have been utilizing a method to download PDF files from the server using Laravel 8 (API Sanctum) and Vue 3. In my Vue component, I have implemented a function that allows for file downloads.
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)
})
In this function, 'dLink' is designated as a link reference.
const dLink = ref(null)
within the template:
<a ref="dLink"/>
This approach has been working flawlessly until recently. After updating the project through composer and npm, I encountered an error when attempting to download a file:
contract.js:1049 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'responseType')
Any insights on why this might be occurring? The API backend does return the file as a blob format.
return Storage::download($document->filename);