I am using this approach for downloading a pdf file from server (laravel 8 (api sanctum) + vue 3)

In the vue ponent 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 (poser 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);

I am using this approach for downloading a pdf file from server (laravel 8 (api sanctum) + vue 3)

In the vue ponent 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 (poser 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);

• javascript
• vue.js

Share Improve this question Follow edited Jan 5, 2022 at 22:15 miken32 42.8k1616 gold badges125125 silver badges174174 bronze badges asked Jan 5, 2022 at 22:09 calin24calin24 99144 gold badges2424 silver badges4949 bronze badges 5

• What is contract.js:1049? The stack trace will tell you exactly what piece of code is causing the problem. – miken32 Commented Jan 5, 2022 at 22:15
• @miken32 it's an if if (error.request.responseType === 'blob' && error.response.data instanceof Blob && error.response.data.type && error.response.data.type.toLowerCase().indexOf('json') !== -1) that I am using in error catch .... now I mented all the code from catch error and set only console.log(error) and get TypeError: Cannot set properties of null (setting 'href') wihich is pointing on this line dLink.value.href = window.URL.createObjectURL(response.data); – calin24 Commented Jan 5, 2022 at 22:23
• are you sure you want to use dLink in your template ? You don't need to attach to a "real" <a> tag. Just creating one on the fly is enough. – jeremy castelli Commented Jan 5, 2022 at 22:49
• @jeremycastelli what do you mean on the fly ? can you show me an example ? – calin24 Commented Jan 5, 2022 at 23:06
• Code is not pretty in ment, I create an answer – jeremy castelli Commented Jan 5, 2022 at 23:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

First you need to create a blob and put your response in it,

And as I said in my ment 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();
});