Загрузка двоичных данных из бэкэнда в файл на веб-интерфейсе - PullRequest
Новая
       4

Загрузка двоичных данных из бэкэнда в файл на веб-интерфейсе

2 голосов
/ 06 апреля 2020

У меня есть Express. js бэкэнд, который отправляет в память сгенерированные *.zip с *.docx файлами внутри. Zip отправляется в виде буфера. Бэкэнд отправляет данные, веб-интерфейс получает их. До этого момента все хорошо.

Проблема в том, что когда я получаю его на веб-интерфейсе, используя axios, я не могу заставить браузер загрузить его как *.zip на стороне клиента, чтобы пользователь мог открыть его и используйте.

Это то, что я делаю на веб-интерфейсе: 

      let formData = new FormData()
      formData.append("data", JSON.stringify(this.data))
      formData.append("template", this.template)

      axios.post('http://localhost:3001/gen', formData, {
        responseType: 'blob',
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => {
        res.end( res.data, 'binary' );
      })

, но он не загружает файл, как я sh. Я нигде не сохраняю файл на сервере - я просто создаю его на лету в памяти и отправляю клиенту.

1 Ответ

0 голосов
/ 07 апреля 2020

На ответ от ax ios вам нужно разрешить браузеру обрабатывать загрузку. Смотрите, например, https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743 или https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

В вашем случае это должно быть что-то вроде: 

let formData = new FormData()
formData.append("data", JSON.stringify(this.data))
formData.append("template", this.template)

axios.post('http://localhost:3001/gen', formData, {
    responseType: 'blob',
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(res => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'some_file_name.ext');
    document.body.appendChild(link);
    link.click();
    link.remove();
})

Обратите внимание, что это может не работать в некоторых случаях, например, Inte rnet Explorer. Проверьте https://github.com/kennethjiang/js-file-download, если вам нужна поддержка для этого.

...