Блог

У меня есть sample.tar.gz отчет, который генерируется в моей удаленной системе и должен быть загружен одним нажатием кнопки. Я отправляю запрос через сервер, и его необходимо добавить в файл sample.tar.gz в локальной системе.

В коде на стороне сервера я вижу двоичные данные в ответе

 body:"�q'l_�=ks�6���_��^��*q���d��i��bIs9���-H��ṙl����5�_�P4���e�@h��F���}�y���,I�L]/~Bj�,~�USU%E�r�I�UM�F��R��4C� |��q�tn[�4���_�^z"�k�u���*�/������G�,��iC믚���%�8Yt��‚r���E!YP���U�r/@�d0<[��W=ũ��5t���9�amp;�X��`cF�5��AJ%[T�I�h�D������L6���[nC���-5�Fy�9��L��IWy@9hv �E%�@N���r�٦��s�5"�P*ğa�����h̆(��amp;!Þ!x9a�~�"5���('��>�Iwڂ�g��"�..."
  

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

 export const SystemReport = () => {
  downloadReport = (url) => {
    const options = {
      credentials: 'same-origin',
      responseType: 'arraybuffer',
      method: 'GET',
      headers: {
        'Accept': 'application/gzip; charset=utf-8',
        'Content-Type': 'application/json; charset=utf-8'
      }
    }
    fetch(url, options)
      .then(res => {return res.blob()})
      .then(blob => {
        let url = window.URL.createObjectURL(blob, {type: 'application/zip'})
        let a = document.createElement('a')
        a.href = url
        a.download = 'test.tar.gz'
        a.click()
      }).catch(err => console.error(err))
  }
  const fileUrl = `<System-Path>/api/system-report/download/${<file-name>}`
  return (
    <div className='download-report'>
      <a href='#' onClick={() => downloadReport(fileUrl)} target='_blank' download>
        <Download16 />
      </a>
  </div>
  )
}
  

Но когда я пытаюсь разархивировать файл, я получаю следующую ошибку

 # tar -xvzf ~/Downloads/sample.tar.gz 
tar: Error opening archive: Unrecognized archive format
  

Пытался искать некоторые решения в Интернете, поскольку я все еще изучаю эти вещи, но пока безуспешно. Любая помощь будет оценена!

Редактировать: возврат есть, но я почему-то забыл добавить его сюда. Отредактировал код.

Вы допустили ошибку в следующей строке:

       .then(res => {res.blob()})
  

Функция res => {res.blob()} эквивалентна (если не учитывать различия между стрелками и обычными функциями):

 function (res) {
  res.blob();
}
  

Оно не имеет возвращаемого значения, поэтому blob в следующем .then блоке будет равно undefined .

Вам нужно использовать res => res.blob() синтаксис, эквивалентный следующему коду:

 function (res) {
  return res.blob();
}