How download Excel file in Vue.js application correctly?

Question

I'm struggling to download an Excel file in xlsx format in my Vue.js application. My Vue.js application make post request to the Node.js application which download that Excel file from remote SFTP server. Backend application works without any problems.

In Vue.js application I use next code:

axios.post(config.backendHost + '/excel', {
  file_name: fileName
}).then((response) => {
  const url = URL.createObjectURL(new Blob([response.data], {
    type: 'application/vnd.ms-excel'
  }))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
});

After downloading file by browser, file opens automatically and I am experiencing an error that looks like this:

We found a problem with some content .xlsx. Do you want us to try and recover as much as we can?

Thanks for asking this question. I was stuck here for hours

S. Farooq
– S. Farooq

2020-11-06 16:29:44 +00:00
Commented Nov 6, 2020 at 16:29 — S. Farooq
– S. Farooq, Commented Nov 6, 2020 at 16:29

dibra · Accepted Answer · 2019-09-20 09:09:16Z

32

You need to add the response type as a third argument in your post call

{
    responseType: 'blob'
}

Your final code like that

axios.post(config.backendHost + '/excel', {
    file_name: fileName
}, {
    responseType: 'blob'
}).then((response) => {
    const url = URL.createObjectURL(new Blob([response.data], {
        type: 'application/vnd.ms-excel'
    }))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
});

Or you can use the library FileSaver.js to save your file

import FileSaver from 'file-saver'

axios.post(config.backendHost + '/excel', {
    file_name: fileName
}, {
    responseType: 'blob'
}).then((response) => {

    // response.data is a blob type
    FileSaver.saveAs(response.data, fileName);
});

answered Sep 20, 2019 at 9:09

dibra

3985 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nurzhan Nogerbek Over a year ago

Thank you very much! :) I use first option which you described in your post and it works for me. Can I ask you one more question?! During the download, is it possible to change the style inside the excel file? For example, I want the header to be highlighted in a different color. Is it even possible for your opinion?

dibra Over a year ago

I don't think if you can do any modifications on the fly, but you can manipulate your file on the server side (NodeJS in your case) before downloading.

Tom Over a year ago

Any recommendation on how to write a unit test for this?

Lorenzo Over a year ago

@Tom i'm not sure where the problem lies in unit testing this ? If your test always returns the same file, you can hash it using a hashing algorithm like MD5 (fast but weak due to collisions) and just verify in the test that the file returned has that same hash digest

cjohnson318 Over a year ago

FWIW: I needed to say {responseType: 'arraybuffer'}, not {responseType: 'blob'}. I was sending a .XLSX file from Django as an HttpResponse.

Jorge Epuñan · Accepted Answer · 2021-01-15 03:32:57Z

3

my case worked:

  axios.get(`/api/v1/companies/${companyId}/export`, {
    responseType: 'blob',
  }).then((response) => {
    const url = URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute(
      'download',
      `${companyId}-${new Date().toLocaleDateString()}.xlsx`
    )
    document.body.appendChild(link)
    link.click()
  })

answered Jan 15, 2021 at 3:32

Jorge Epuñan

7607 silver badges10 bronze badges

Collectives™ on Stack Overflow

How download Excel file in Vue.js application correctly?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related