我的文件pdf，xlsx，docx ..在Reactjs中{损坏，下载有错误或有错误

问题描述

我正在与React Js和Axios一起向API发出请求。我正在尝试通过带有ReactJs的API下载文件，但是当它们下载并尝试打开时，出现错误消息：“文件已损坏或损坏”。

文件是通过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，当我打开它时，出现一个错误框，显示消息“文件已损坏”，如果我下载pdf文件，则下载不会有问题，并且当我打开pdf时，它是完全空白的：与原始页数相同，但全为白色。

我正在尝试使用chrome，firefox和brave，并且错误相同

解决方法

这个答案是@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>

javascript reactjs reactjs rest