title: How to download large files from a server from frontend (VueJS) using fetch or axios. Achieve simultaneous download while fetching
body: <p>My frontend (written in VueJS) needs to download a large file from a server (~1GB but can get even larger). My current approach is using <a href="https://www.npmjs.com/package/streamsaver" rel="nofollow noreferrer">streamSaver</a> however, although this seems to work fine when I download files while testing locally, it seems to struggle when testing it on other devices (android phone while pointing the server to 0.0.0.0)</p>
  <p>Front end Code for downloading, I'm currently piping the fetch data to streamSaver, however from what I understand, the fetch request has to complete before the download action starts, which isn't really the solution I require. I want to be able to start the download simultaneously.</p>
  <pre class="lang-js prettyprint-override"><code>const fileStream = streamSaver.createWriteStream(fileName);
  const res = await fetch(&quot;gets/download-file?&quot; + new URLSearchParams({
      relPath: path.join(forPath, fileName)
  }))
  const readableStream = res.body
  if (window.WritableStream &amp;&amp; readableStream.pipeTo) {
      return readableStream.pipeTo(fileStream)
          .then(() =&gt; console.log('done writing'))
  }
  window.writer = fileStream.getWriter()
  
  const reader = res.body.getReader()
  const pump = () =&gt; reader.read()
      .then(res =&gt; res.done
          ? window.writer.close()
          : window.writer.write(res.value).then(pump))
  
  pump()
  </code></pre>
  <p>My server is written in express.js, and I have also tried streaming the data from the server side as well</p>
  <pre class="lang-js prettyprint-override"><code>router.get(&quot;/download-file&quot;, checkPath, async (req, res) =&gt; {
      try {
          const relativePath = req.query.relPath;
          const fullPath = path.join(UPLOAD_FOLDER, relativePath);
          console.log(green(&quot;Downloading: &quot;, fullPath))
          // res.sendFile(fullPath, (err) =&gt; {
          //     if (err) console.log(red(err))
          // })
          res.setHeader('Content-Type', 'application/octet-stream');
          fs.createReadStream(fullPath).pipe(res);
      } catch (err) {
          console.log(red(err))
      }
  })
  </code></pre>
  <p>I have seen <a href="https://stackoverflow.com/questions/67776919/stream-large-blob-file-using-streamsaver-js">Stream large blob file using StreamSaver.js</a>, and other similar answers but they all seem to have similar flaws of having to complete the fetch request and wait till then before streaming a download, which isn't what I'm looking for.</p>