如何通过 React 中的 API 下载文件？答案

【问题标题】：How to download a file through an API in React?如何通过 React 中的 API 下载文件？
【发布时间】：2019-10-06 17:56:12
【问题描述】：

在我的 react 应用程序中，我有一个组件，它有一个文件下载按钮，用于下载来自后端的文件。我正在使用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"
  }
});

【问题讨论】：

您应该将文件下载为二进制而不是 json
@Dominic 那么我应该将内容类型设置为二进制流还是八进制流？
正确 - “对于接收“application/octet-stream”实体的实现，推荐的操作是简单地将数据放入文件中”
查看此答案 - stackoverflow.com/questions/49040247/… 记得添加 responseType: 'arraybuffer',，我认为您可以将 Accept 更改为通用八位字节流
@Dominic 谢谢！这个答案解决了我的问题

标签： javascript reactjs axios

【解决方案1】：

由于我无法添加 cmets，因此发布作为答案。我尝试过同样的事情，并在link 中发布了同样的问题。

对于 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 形式接收内容。

【讨论】：