Как скачать файл получаемый в ответе на POST запрос?

Question

[Алексей]

Получаю файл в ответ на POST запрос, перевожу их в JSON далее перевожу их в формат Uint8Array, но когда хочу преобразовать это в файл формата xlsx, получаю ошибку при открытии файла, что он повержден

Изначальный ответ
PK\x03\x04\x14\x00\x00\x00\b\x00\x16\x06TVFZ�\f�\x00\x00\x00�\x00\x00\x00\x10\x00\x00\x00docProps/app.xmlM�M\v…\x00\x00�\x01�/\x00\x00[Content_Types].xmlPK\x05\x06\x00\x00\x00\x00\t\x00\t\x00>\x02\x00\x00\x031\x00\x00\x00\x00

преобразованный в Uint8Array
Uint8Array(22891) [80, 75, 3, 4, 20, 0, 0, 0, 8, 0, 22, 6, 84, 86, 70, 90, 239, 191, 189, 12, 239, 191, 189, 0, 0, 0, 239, 191, 189, 0, 0, 0, 16, 0, 0, 0, 100, 111, 99, 80, 114, 111, 112, 115, 47, 97, 112, 112, 46, 120, 109, 108, 77, 239, 191, 189, 77, 11, 239, 191, 189, 48, 16, 68, 239, 191, 189, 74, 239, 191, 189, 239, 191, 189, 110, 85, 239, 191, 189, 32, 49, 32, 212, 163, 239, 191, 189, 239, 191, 189, 123, 72, 55, 54, 239, 191, 189, 100, 67, 118,

<template>
  <div style="display: flex; justify-content: space-between">
    <b-form-file v-model="file" name="123" class="mt-3" plain></b-form-file>
    <button @click="SendFile()" class="button Accept">ОТПРАВИТЬ</button>
  </div>
</template>


<script>
import api from "@/api/wagonPark";
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    SendFile() {

      console.log(this.file);
      let formData = new FormData();
      formData.append("file", this.file);
      api
        .postShipmentList(formData)
        .then(data => {
          console.log(data)
            let json = JSON.stringify(data)
          let buffer = Buffer.from(JSON.parse(json).data)
          console.log(buffer)
          let link = document.createElement('a');
          link.download = 'hello.xlsx';

          let blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });

          link.href = URL.createObjectURL(blob);

          link.click();

          URL.revokeObjectURL(link.href);
        })
    },
  },
};
</script>

Answer 1

[Alexandroppolus]

api.postShipmentList(formData).then((data) => ...)

data должно быть блобом или хотя бы бинарным массивом. В любом случае запихивать его в JSON.stringify нет смысла

Comments

[Алексей]

как-то так имеете ввиду?

api
          .postShipmentList(formData)
          .then(resp => resp.blob())
          .then(blob => {
            let buffer = Buffer.from(blob.data)
            let link = document.createElement('a');
            link.download = 'hello.xlsx';

            let blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });

            link.href = URL.createObjectURL(blob);

            link.click();

            URL.revokeObjectURL(link.href);
          })

и если верно все понимаю, то в бинарный массив я данные преобразовал "преобразованный в Uint8Array"

[Надим]

Алексей,

.then(blob => {

            let link = document.createElement('a');
            link.download = 'hello.xlsx';

            link.href = URL.createObjectURL(blob);

            link.click();

            URL.revokeObjectURL(link.href);

          })

и не факт что это еще будет работать, так как непонятно что возвращает функция postShipmentList

[Алексей]

Надим Закиров,

ответ получаю следующего вида

config
: 
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data
: 
"PK\u0003\u0004\u0014\u0000\u0000\u0000\b\u0000�iT
headers
: 
AxiosHeaders {content-length: '9526', content-type: 'text/html; charset=utf-8', Symbol(defaults): null}
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
: 
200
statusText
: 
"OK"

[Надим]

Алексей, вы не сможете такой текст конвертировать в рабочий файл, еще на этапе запроса надо указать в параметрах XHR чтобы он возвращал не текст, а blob! Вот тогда его можно будет качнуть.

https://developer.mozilla.org/en-US/docs/Web/API/X...

Но вы запрос делаете не при помощии XHR или fetch, а какой-то непонятной либой, которая хрен знает как устроена.

[Алексей]

fetch('http://10.1.5.20/api/wagon-park/shipment-list/make-file/', {

        headers: {
          Authorization: `Basic ${token}`,
          'responseType ': 'blob'
        },
        body: formData,
        method: "POST",
      })
        .then(blob => {
          
          let link = document.createElement('a');
          link.download = 'hello.xlsx';

          link.href = URL.createObjectURL(blob.data);

          link.click();

          URL.revokeObjectURL(link.href);

        })

Что-то в таком духе имели ввиду?

[Надим]

Алексей, неверно, надо так:

fetch(...)
.then((response) => response.blob())
.then((blob) => {
          let link = document.createElement('a');
          link.download = 'hello.xlsx';

          link.href = URL.createObjectURL(blob);

          link.click();

          URL.revokeObjectURL(link.href);

});

[Алексей]

Надим Закиров, все равно файл бьет, заменим тогда ответ от сервера на ссылку, спасибо

[Надим]

Алексей, не должно, последний вариант верный, возможно ошибка на сервере - откройте и посмотрите битый файл в notepad++