2

I am trying to build a single page app using React. I came up with this hacky way to download a local file (residing in the public directory). I have two questions:

  1. Can I write this more cleanly?
  2. Is there any better or more elegant way to download a local file?
const handleDownload = () => {
  const tempComponent = document.createElement('a')
  tempComponent.href = 'Dark.ask'
  tempComponent.download = 'Dark.ask'
  tempComponent.click()
  tempComponent.parentElement?.removeChild(tempComponent)
}
fedonev
  • 20,327
  • 2
  • 25
  • 34
Ashis Paul
  • 33
  • 4

1 Answers1

-1

1. No, it's always the same process: create link element, put encoded (base64, urlencoded) data to the link, programmatically click the link and then remove element

2. I think, better you should not place all data to href attribute of a element - it's all will be loaded to user ram.

Use stream saver: https://github.com/jimmywarting/StreamSaver.js It will allow you to download any size of file from custom source (like API endpoint)

Or you can just put a link to the static file in [href], and when the user clicks the link, the browser will automatically start download, more: https://www.w3schools.com/tags/att_a_download.asp.

maybe duplicate of How to download large file with JavaScript

Фарид Ахмедов
  • 830
  • 4
  • 10