Как скачать файл через API в React?

Question

В моем приложении реакции у меня есть компонент, в котором есть кнопка загрузки файла для загрузки файла из Бэк-энда. Я использую AXIOS для вызова AJAX. Проблема в том, что после загрузки файла он поврежден. Я загружаю png файлы и pdf файлы. Когда я открываю загруженный образ, он говорит, что он поврежден и загружен pdf показывает только белый фон. Как правильно загрузить файл?

** Компонент: **

import API from "../../api/api";

class DocumentsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileId: 4
    };
    this.downloadMapById = this.downloadMapById.bind(this);
  }

  downloadMapById() {
    const type = 1;
    const file_id = this.state.fileId;

    const FileDownload = require("js-file-download");

    API.post("project/files/download", { file_id, type })
      .then(({ data }) => {
        FileDownload(data, "myImage.png");
        console.log("success!", data);
      })
      .catch(err => {
        console.log("AXIOS ERROR: ", err);
      });
  }

  render() {
    return <button onClick={() => this.downloadMapById}>Download</button>;
  }
}

Файл API:

import axios from "axios";

const token = localStorage.getItem("token");

export default axios.create({
  baseURL: `${process.env.REACT_APP_BACKEND_BASE_URL}/api/v1/`,
  headers: {
    Authorization: "Bearer " + token,
    "Content-Type": "application/json",
    Accept: "application/json"
  }
});

Answer 1

Поскольку я не могу добавлять комментарии, я пишу как ответ. Я попробовал то же самое и разместил вопрос для того же в этой ссылке .

Для post метода я получаю успех с fetch , как показано ниже.

 fetch("url",
        { 
            method: "POST",
            headers: { "Content-Type": "application/json",'Authorization': 'Bearer ' + window.localStorage["Access_Token"]},
            body:data
        }).then(response => response.blob()).then(response => ...*your code for download*... )

Вы получаете поврежденный файл, потому что вы не получаете содержимое как blob или arraybuffer .