如何解决我的文件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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
