Solved: Adding download link for downloading excel file retrieved from database

I've got an excel file stored in base64, that is retrieved in a jquery ajax.get call. The base64 data is then converted back into .xlsx file, and attached to a download <a> tag, for the user to click and download the .xlsx file. I get 2 errors: the first error is: jquery.min.js:3 Uncaught TypeError: Cannot read property 'createDocumentFragment' of null.

The 2nd error happens when I click on the download link: Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Not sure if 2nd error is related to the 1st one or not. My code is as following:

HTML code:

<a id="downloadlink" onClick="return DownloadExcel()">Download Excel File</a>

Open in new window

JS code:

//download excel func
function DownloadExcel( file, filename) {
    //debugger;
    var blob = base64toBlob(file, "data:application/vnd.ms-excel;")
    if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
        return navigator.msSaveOrOpenBlob(blob, filename);
    }
    else{
        console.log("inside else of downloadexcel");
      var objectUrl = URL.createObjectURL(blob);
        var downloadLink = $("#downloadlink");
        downloadLink.href = objectUrl; //uri;
        downloadLink.download = filename;
       // document.body.appendChild(downloadLink);
       $(document).append(downloadLink);
    }
  }
  
  function base64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
  
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
  
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);
  
      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
  
      var byteArray = new Uint8Array(byteNumbers);
  
      byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {
      type: "application/vnd.ms-excel"
    });
    return blob;
  }
  // /download excel func

  $(document).ready(function(){ 

    $.ajax({
            url: "https://myserver.com/files/file.cfc?fileid=12",
            type: "GET",
            dataType: "json",
            cache: false,
            success: function(response){
                if(response.length != 0){
                    console.log("Successful file retrieval!");
                  
                   DownloadExcel( response[0].filecontent, response[0].filename  );    
                   
                }
                else{
                    console.log("Error in file retrieval!");
                    console.log( response );
                }
            },
            error: function( response ){
                console.log("There was an API server error!");
                console.log( response );
            }
        });
  });

Open in new window