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

Question

我正在与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和勇敢和错误是相同的

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>