title: How do I save a file getting downloaded from server using react?
body: <p>I have one backend API which basically downloads a template whenever we call it.
  I have provided a href on my html page hence whenever someone click on that href, it calls backend API and that file should get downloaded. </p>
  
  <p>But the file is not getting downloaded. </p>
  
  <p>I am using React. If i simply hit the backend from my browser, file gets downloaded but if i call that from react, it doesn't.</p>
  
  <p>Any leads?</p>
  
  <p><strong>REACT CODE :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const config = require('config');
  var aws4 = require('aws4');
  const Promise = require('axios');
  
  const requestHelper = {
    appendHeaders(request){
      request.headers = request.headers || {};
      if(request.headers["Content-Type"]){
        return
      }
      request.headers["Content-Type"] = "application/json";
    },
    externalApi(request, serverResult){
      if(!request.method){
        request.method='POST';
      }
      request.path = request.url
      this.appendHeaders(request)
     console.log('request',request)
      return Promise(request)
      .then((apiResponse) =&gt; {
        if (apiResponse.data.errors) {
          var error = apiResponse.data.errors;
          console.log('api error response: ', error);
          serverResult.status(400).json({ error })
        } else {
          console.log('api response: ', apiResponse.data);
          serverResult.status(200).json(apiResponse.data);
        }
      }).catch((error) =&gt; {
        console.log('api error response: ', error);
        serverResult.status(400).json({ error });
      });
     },
  
     getDownloadResponse(request, serverResult){
      debugger;
      request.path = request.url
      this.appendHeaders(request)
      console.log(request);
      return Promise(request)
      .then((apiResponse) =&gt; {
        if (apiResponse.data.errors) {
          var error = apiResponse.data.errors;
          console.log('api error response: ', error);
          serverResult.status(400).json({ error })
        } else {
          serverResult.status(200);
          console.log('api response status: '+200);
        }
      }).catch((error) =&gt; {
        console.log('api error response: ', error);
        serverResult.status(400).json({ error });
      });
     }
  };
  
  module.exports = requestHelper;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>BACKEND API CODE :</strong> </p>
  
  <pre><code>@RequestMapping(value = GlobalConstants.DOWNLOAD_FILE, method = RequestMethod.GET)
  public void downloadTemplate(HttpServletRequest hRequest, HttpServletResponse response) throws Exception {
  
      InputStream in = null;
      OutputStream out = null;
      try {
          if (!StringUtils.isEmpty(sampleFile)) {
              File file = new File(sampleFile);
              in = finderService.downloadFile(sampleFile);
              if (in != null) {
                  MimetypesFileTypeMap mimetypesFileTypeMap = new MimetypesFileTypeMap();
                  response.setContentType(mimetypesFileTypeMap.getContentType(file));
                  String headerKey = "Content-Disposition";
                  String headerValue = String.format("attachment; filename=\"%s\"", file.getName());
                  response.setHeader(headerKey, headerValue);
  
                  out = response.getOutputStream();
                  byte[] buffer = new byte[4096];
                  int length;
                  while ((length = in.read(buffer)) &gt; 0) {
                      out.write(buffer, 0, length);
                  }
              }
          } else {
          response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
          }
          logger.error("Internal Server error"); //Add logs for server error here also
  
      } catch (Throwable th) {
          response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
          logger.error(th);
          return;
      } finally {
          if (in != null) {
              in.close();
          }
          if (out != null) {
              out.flush();
          }
      }
  }
  </code></pre>