I am working with React Js and Axios to make requests to an API. I am trying to download files via API with ReactJs, but when they download and try to open, I get an error message: 'the file is damaged or damaged'.

The files are obtained through a GET request and can be of type pdf, xlxs, docx and others), and the mime is obtained through props that es from a parent ponent

This is my code (a part of my ponent)

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=".6.1/umd/react.production.min.js"></script>
<script src=".6.1/umd/react-dom.production.min.js"></script>

I am working with React Js and Axios to make requests to an API. I am trying to download files via API with ReactJs, but when they download and try to open, I get an error message: 'the file is damaged or damaged'.

The files are obtained through a GET request and can be of type pdf, xlxs, docx and others), and the mime is obtained through props that es from a parent ponent

This is my code (a part of my ponent)

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./ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

The mime and filename e from a parent ponent.

The problem I have is that I download a file, xlsx for example, and when I open it I get an error box with the message 'The file is damaged', if I download a pdf file, it downloads without problem and when I open the pdf is pletely blank: the same number of sheets as the original but all white.

I am trying from chrome, firefox and brave and the error is the same

• javascript
• reactjs
• rest
• blob

Share Improve this question Follow asked Oct 7, 2020 at 20:13 WalWal 4311 silver badge66 bronze badges 2

• 2 Have you looked at this: gist.github./javilobo8/097c30a233786be52070986d8cdb1743? – hexbioc Commented Oct 7, 2020 at 20:41
• You're the best! Why didn't you put it as an answer? – Wal Commented Oct 7, 2020 at 21:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This answer is by @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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>