Почему мой сгенерированный docx в javascript из блоба заполняется [Object Object]?

Я отправляю данные на мой Django backend через POST запрос, сервер затем создает docx, используя эти данные, и отправляет его обратно мне, где я пытаюсь загрузить его, используя следующий код :

axios.post(route, data).then((res) => {
    const filename = "report.docx"
    var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    var link = document.createElement('a');                     
    var URL = window.URL || window.webkitURL;
    var downloadUrl = URL.createObjectURL(blob);
    link.href = downloadUrl;
    link.style = "display: none";
    link.download = filename;
    document.body.appendChild(link)
    link.click()
    link.remove()       
});

Загрузка файла работает, но когда я открываю его, он содержит только [Object Object], что я делаю не так? Я проверил бэкенд и документ создан правильно, так как он имеет правильное содержание, когда я сохраняю его, когда он генерируется на сервере, так что это либо то, что я отправляю его плохо, либо плохо создаю файл во фронтенде.

Вот как я отправляю его из бэкенда :

        #Generating the doc properly before this...
    response = HttpResponse(content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document')
    report_filename = 'graph-report-'+now.strftime('%Y-%m-%d_%H-%M-%S')+'.docx'
    response['Content-Disposition'] = 'attachment; filename=%s'%(report_filename)
    document.save(response)
    return response

Спасибо, что помогли мне.

В Axios, res в axios.post(route, data).then((res) => является объектом ответа.

Возвращенные данные находятся в res.data.

  1. Сделайте console.log(res.data), чтобы убедиться, что это действительно двоичные данные, которые вы ожидаете.
  2. Сделайте new Blob([res.data], ..., чтобы использовать эти данные для получения блоба. (Если это уже блоб, любезно предоставленный Axios, вам необязательно беспокоиться).

    3. (В качестве примечания, на самом деле вам не нужно использовать fetch() и createObjectURL для этого, поскольку вы формируете бинарный ответ, похожий на загрузку; достаточно, чтобы браузер просто отправил нужные данные, например, в виде формы, в конечную точку; он точно так же загрузит ответ)

Вернуться на верх