Skip to content

Instantly share code, notes, and snippets.

@LarryKlugerDS
Created October 18, 2020 18:40
Show Gist options
  • Select an option

  • Save LarryKlugerDS/90db2c8facf8e2d426b755801dc20fa8 to your computer and use it in GitHub Desktop.

Select an option

Save LarryKlugerDS/90db2c8facf8e2d426b755801dc20fa8 to your computer and use it in GitHub Desktop.
File download with React.JS
// The React.JS code for the download method:
const blob = new Blob([output]); // Step 3
const fileDownloadUrl = URL.createObjectURL(blob); // Step 4
this.setState ({fileDownloadUrl: fileDownloadUrl}, // Step 5
() => {
this.dofileDownload.click(); // Step 6
URL.revokeObjectURL(fileDownloadUrl); // Step 7
this.setState({fileDownloadUrl: ""})
})
// The hidden anchor element:
<a style={{display: "none"}}
download={this.fileNames[this.state.fileType]}
href={this.state.fileDownloadUrl}
ref={e=>this.dofileDownload = e}
>download it</a>
@eternalmangekyo022

Copy link
Copy Markdown

thanks this is useful but what does dofileDownload stand for? just curious

@LarryKlugerDS

Copy link
Copy Markdown
Author

dofileDownload is set to the ID of the a (anchor) element. That element does the actual download via the browser when its click method is invoked

ghost commented Sep 27, 2021

Copy link
Copy Markdown

dofileDownload is set to the ID of the a (anchor) element. That element does the actual download via the browser when its click method is invoked

sorry it just took me some time to notice:)

ghost commented Sep 27, 2021

Copy link
Copy Markdown

dofileDownload is set to the ID of the a (anchor) element. That element does the actual download via the browser when its click method is invoked

sorry it just took me some time to notice:)

wait im on a different account lol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment