我的文件（pdf、xlsx、docx ..）在 Reactjs 中下载损坏或有错误

Question

我正在使用 React Js 和 Axios 向 API 发出请求。我正在尝试使用 ReactJs 通过 API 下载文件，但是当他们下载并尝试打开时，我收到一条错误消息：'the file is damaged or damaged'.

文件通过GET请求获取，可以是pdf、xlxs、docx等类型），mime通过父组件的props获取

这是我的代码（我的组件的一部分）

fetchFile(){

  axios
    .get(`/someurl/thefiles/${this.props.file.id}`, { headers })

    .then(response => {
    
          let url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download",
          `${this.props.file.name}.${this.props.file.mime}`);
          document.body.appendChild(link);
          link.click();
  });


}

render(){

  return(
      
      <button onClick={this.fetchFile}> Download file </button>
    
  )

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

MIME 和文件名来自父组件。

我遇到的问题是我下载了一个文件，例如 xlsx，当我打开它时出现一个错误框，其中包含消息 'The file is damaged'，如果我下载一个 pdf 文件，它可以毫无问题地下载当我打开 pdf 时，它是完全空白的：与原始页数相同，但都是白色的。

我正在尝试 chrome、firefox 和 brave，错误是一样的

Answer 1

此回答来自@hexebioc

fetchFile(){
   axios({
            url: `/someurl/thefiles/${this.props.file.id}`,
            method: "GET",
            headers: headers,
            responseType: "blob" // important
        }).then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement("a");
            link.href = url;
            link.setAttribute(
                "download",
                `${this.props.file.name}.${this.props.file.mime}`
            );
            document.body.appendChild(link);
            link.click();
        });


}

render(){

  return(
      
      <button onClick={this.fetchFile}> Download file </button>
    
  )

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的文件（pdf、xlsx、docx ..）在 Reactjs 中下载损坏或有错误

my files (pdf, xlsx, docx ..) are downloaded corrupt or with errors, in Reactjs

javascript

rest

blob

reactjs