vue.js - How do I use blob for downloading file on javascript

Question

I've seen a few answers on StackOverflow, people asked about how to use it. But none of them helped. Here's my code:

async fileDownload(id) {
      this.isLoading = true;
      try {
        const res = await downloadApi.downloadById(id);
        console.log(res.headers);
        let blob = new Blob([res.data], {type: res.headers['content-type']});
        let link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'file';
        link.click();
        URL.revokeObjectURL(link.href);
      } catch (e) {
        console.error(e);
      }
      this.isLoading = false;
    },

the function, request, and response are working fine. But when I download the file, the file doesn't open.

Request header:

the response data: ...

Answer 1

Try it:

  let configHeaders = {
    responseType: 'blob'
  }
  axios.get('localhost:9090/api', configHeaders).then(response => {
    let fileURL = window.URL.createObjectURL(new Blob([ ...response ]))
    let fileLink = document.createElement('a')
    fileLink.href = fileURL
    fileLink.setAttribute('download', `file-name-${month}.txt`)
    document.body.appendChild(fileLink)
    fileLink.click()
  })

Maybe you need spread response. See:

new Blob([ ...response ])