Как правильно скачать файл Excel в приложении Vue.js? - PullRequest
Новая
       32

Как правильно скачать файл Excel в приложении Vue.js?

0 голосов
/ 20 сентября 2019

Я пытаюсь загрузить файл Excel в формате xlsx в моем приложении Vue.js.Мое приложение Vue.js отправляет запрос в приложение Node.js, которое загружает этот файл Excel с удаленного SFTP-сервера.Бэкэнд-приложение работает без проблем.

В приложении Vue.js я использую следующий код: 

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

После загрузки файла браузером файл открывается автоматически, и у меня возникает ошибка, которая выглядит следующим образом:

Мы обнаружили проблему с некоторым содержимым .xlsx.Вы хотите, чтобы мы попытались восстановить столько, сколько мы можем?

1 Ответ

1 голос
/ 20 сентября 2019

Вам необходимо добавить тип ответа в качестве третьего аргумента в вашем сообщении вызове 

{
    responseType: 'blob'
}

Ваш окончательный код подобный этому 

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

Или вы можетеиспользуйте библиотеку FileSaver.js для сохранения вашего файла 

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