0

i want to download the file. I could see the file link but when i click on the link the file getting downloaded but couldn't able to open the downloaded file. I couldn't able to figure where i'm going wrong. I'm getting in this way while opening the file. i'm getting

downloaded

Here is the code:

 <div>
        <b>File</b> :{" "}
        <a href="#" onClick={this.FileDownload}>
          {this.state.file}
        </a>
      </div>

Here is the sample code: "https://codesandbox.io/s/dazzling-stallman-wbwvf"

Can anyone help me in this query?

Sanjana
  • 286
  • 2
  • 7
  • 20
  • Does this answer your question? [How to trigger a file download when clicking an HTML button or JavaScript](https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript) – Drew Reese Apr 25 '20 at 04:27
  • @DrewReese - I could download the file but i couldn't able to open the file. I want every file extension could open like .pdf, .docx., etc. I've gone through this link "https://medium.com/yellowcode/download-api-files-with-react-fetch-393e4dae0d9e" but i didnt implemented any helper.js. i just gave only file component – Sanjana Apr 25 '20 at 04:33
  • So is the issue then you don't know where the file was downloaded to? – Drew Reese Apr 25 '20 at 04:36
  • @DrewReese - I 've updated my query with a snapshot. When i see in downloaded page then i'm getting blob: http://. Does blob making file crash? – Sanjana Apr 25 '20 at 04:39

2 Answers2

0

fetch("/api/FormDetails/" + this.props.match.params.id).then(async (response: any) => {
            const b = await response.blob();
            let a = document.createElement('a');
            let url = URL.createObjectURL(b);
            a.href = url;
            a.download = `mypdf.pdf`;
            a.click();
        }).catch(err=>showError(err))
    }

Your code seems fine, Please check if file extensions are correct while saving, as that might be one reason you are unable to open after download.

gautamits
  • 1,262
  • 9
  • 11
  • It is getting open in backend but through ui i couldn't able to open the file. Is there any other method for downloading the file? Please help me in this. – Sanjana Apr 25 '20 at 04:27
  • Through ui, you mean browser ? What is file extension ? Codesandbox doesnt show any file name, therefore file extension is not clear yet. Please check if you are able to download using CURL. – gautamits Apr 25 '20 at 04:37
  • No idea, i'm new to react, Do we need to give file extensions while downloading. If yes, then how to give the extensions in file component? – Sanjana Apr 25 '20 at 04:43
  • You just give it appropriate filename including extension.I see you are downloading pdf. – gautamits Apr 25 '20 at 04:46
  • I have added a snippet. Please see if that helps. – gautamits Apr 25 '20 at 04:48
  • I'm getting same error for pdf file but when i give .docx file, it is getting open - but not showing any data in word file – Sanjana Apr 25 '20 at 04:56
  • .docx is just another compressed file like .zip . And thats why it is opening. I am wondering if [wget](https://www.gnu.org/software/wget/manual/wget.html) or curl are able to download correct file. Try downloading file using wget and you can identify whether issue is in javascript code or backend. – gautamits Apr 25 '20 at 05:03
  • how to use wget or curl - are thery're dependencies? – Sanjana Apr 25 '20 at 05:10
  • They are operating system tools. Google on how to install them for your operating system. You can even try to open full file path in browser and browser will start downloading. – gautamits Apr 25 '20 at 05:18
0

There is a simple method, but you have to go your URL through this=> herokuapp.com

And this will perfectly bypass the CORS issue :) #Happy#Coding

fetch("https://cors-anywhere.herokuapp.com/"+url)
.then(res => {
  const newBlob = await response.blob();
  const blob = new Blob([newBlob], {type:'application/pdf'})
}).catch(error => console.log(error)
DM-techie
  • 1
  • 2