title: How to download XLSX file from a server response in javascript?
body: <p>I have a react frontend and java server using the Micronaut framework. In the <code>BaseController</code> of my Micronaut Framework, I am creating an XLSX file and then sending the response so that it gets downloaded when called from the frontend code. </p>
  
  <p><strong>BaseController</strong></p>
  
  <pre><code>@Inject ExportService exportService
  
  @Controller('/abc/api/v1')
  @Slf4j
  class BaseController implements CachingHandler, CommonUtils {
      @Post('/export/{name}')
      @Consumes(MediaType.APPLICATION_JSON)
      @Produces(MediaType.ALL)
      executeExporter(String name, @Nullable @Body LinkedHashMap payload) {
          def handler = { LinkedHashMap paramMap -&gt;
              List paramMapList = paramMap.get("data") as List
              Byte[] resultBytes = exportService.exportToXLSX(paramMapList, getFileName(getLookupValue(name), paramMap.get("key") as String), true)
              log.info String.format("About to return XLSX file %s for %s",getFileName(getLookupValue(name), paramMap.get("key") as String), name)
              return resultBytes
          }
          def results = handler.call(payload)
          InputStream inputStream = new ByteArrayInputStream(results)
          return new StreamedFile(inputStream, getFileName(getLookupValue(name), payload["key"] as String))
      }
  }
  </code></pre>
  
  <p><strong>ExportService</strong></p>
  
  <p><b>Note</b>: Using the main method of this class I am able to create a <code>TestReport.xlsx</code> file. <code>XLSXExporter</code> class uses <code>Apache POI</code> library to generate XLSX file.</p>
  
  <pre><code>@Prototype
  @Slf4j
  class ExportService implements CommonUtils {
  
      Byte[] exportToXLSX(List response, String fileName, boolean isDelete) {
          def headers = []
          try {
              headers = response[0].keySet()
          } catch(Exception e) {
              e.printStackTrace()
          }
          Map params = [:]
          params[Constants.HEADERS] = headers
          params[Constants.DATA] = response
  
          XLSXExporter xlsxExporter = new XLSXExporter()
          boolean fileCreated = xlsxExporter.writeData(Constants.DEFAULT_SHEET_NAME, fileName, params)
          if (fileCreated) {
              Byte[] workbookContent = xlsxExporter.getFile(fileName, isDelete)
              return workbookContent
          } else {
              return new Byte[0]
          }
      }
  
      static void main(String[] args) {
          def param = []
          for (int i in 1..5) {
              def paramMap = [:]
              paramMap["key1"] = "data"+i
              paramMap["key2"] = "data"+i
              paramMap["key3"] = "data"+i
              param.add(paramMap)
          }
          ExportService exportService = new ExportService()
          Byte[] resultBytes = exportService.exportToXLSX(param, "TestReport.xlsx", false)
  
          /**
              I am able to create a proper TestReport.xlsx file using this main method
          **/
      }
  }
  </code></pre>
  
  <p>I tested the above API from Postman and it is able to download an XLSX file.
  <a href="https://i.stack.imgur.com/w5EJE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w5EJE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/ubQav.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubQav.png" alt="enter image description here"></a></p>
  
  <p>When I call the above export API using my application (javascript), it is able to download an xlsx file but it does not open.</p>
  
  <p>Javascript code to call export API</p>
  
  <pre><code>const exportData = (filteredRows, activity) =&gt; {
      let filename = "TestReport.xlsx";
      return axios({
          headers: {
              'Content-type': 'application/json'
           },
          accept:'application/x-www-form-urlencoded',
          url: '/abc/api/v1/export/'+ activity,
          method: 'post',
          data: {
              "key": "8575",
              "type":"userdetails",
              "data":filteredRows
          }
      }).then(resp =&gt; {
          var blob = resp.data;
          if(window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveBlob(blob, filename);
          }
          else{
              var downloadLink = window.document.createElement('a');
              downloadLink.href = window.URL.createObjectURL(new Blob([blob], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));
              downloadLink.download = filename;
              document.body.appendChild(downloadLink);
              downloadLink.click();
              document.body.removeChild(downloadLink);
             }
      });
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/sH7Bg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sH7Bg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/BMscC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BMscC.png" alt="enter image description here"></a>
  Once I click yes on the above dialog I get below error and nothing gets displayed as opposed to the file downloaded from Postman.
  <a href="https://i.stack.imgur.com/fl3aC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fl3aC.png" alt="enter image description here"></a></p>