下载 pdf 文件 (blob) 时出现 javascript 错误

Question

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

Answer 1

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

Answer 2

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