Download and convert c# excel byte array to javascript blob

Question

I am using a POST method to get a byte array of an excel file

c# server side implementation:

 downloadExcel() {
    ....
    FileResultDto fileResultDto = new FileResultDto
    {
       Data = ExcelHelper.CreateExcelFile(excelFile) //Data contains the byte array
    };

    return new JsonHttpResponseMessage(JsonConvert.SerializeObject(fileResultDto));
}

CreateExcelFile():

public byte[] CreateExcelFile(ExcelFile excelFile)
    {
        try
        {
            #region Validation

            if (excelFile == null)
            {
                throw new ArgumentNullException(nameof(excelFile));
            }

            #endregion

            byte[] bytes;

            using (ExcelPackage excelPackage = new ExcelPackage())
            {
                for (int i = 1; i <= excelFile.Worksheets.Count; i++)
                {
                    Worksheet worksheet = excelFile.Worksheets[i - 1];

                    excelPackage.Workbook.Worksheets.Add(worksheet.Name);

                    ExcelWorksheet currentExcelWorksheet = excelPackage.Workbook.Worksheets[i];

                    if (excelFile.HasLogoTemplate)
                    {
                        byte[] imageBytes = Convert.FromBase64String(LogoBase64);

                        Image image;
                        using (MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length))
                        {
                            image = Image.FromStream(ms, true);
                        }

                        ExcelPicture picture = currentExcelWorksheet.Drawings.AddPicture("Logo", image);

                        picture.SetPosition(0, 4, 0, 10);

                        currentExcelWorksheet.Row(1).Height = 50;
                    }

                    SetColumnsWidths(currentExcelWorksheet, worksheet);

                    WriteHeaderRow(currentExcelWorksheet, worksheet.HeaderRow);

                    WriteCells(currentExcelWorksheet, worksheet.Cells);
                }

                #region Set Excel Stream

                bytes = excelPackage.GetAsByteArray();

                #endregion
            }

            return bytes;
        }
        catch (Exception exception)
        {
            throw new Exception("There was an error on excel export. Exception: ", exception);
        }
    }

front end implementation:

public downloadExcel(): void {

    this.myRepository.downloadExcel(this.postData).then(result => {
        var byteArray = new Uint8Array(result.data.data);

        var a = window.document.createElement('a');
        a.href = window.URL.createObjectURL(new Blob([byteArray], { type: "application/octet-stream" }));

        a.download = "test.xlsx";

        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }, error => {
        console.log(error);
    });
}

Apparently the created blob file it seems to be corrupted. Any suggestions where the problem can be?

Answer 1

Finally the problem solved using 'arraybuffer' as the response type of the http request.

let requestConfiguration: ng.IRequestConfig = {
        cache: ...,
        data: ...,
        headers: ...,
        method: ...,
        url: ...,
        responseType: 'arraybuffer'
    };        

    let promise: ng.IPromise<any> = this.$http(requestConfiguration);

Answer 2

The same is done in Angular. This might be help you

downloadExcel(){
        this.downloadAttachment(filename).subscribe(res => {
          let Res=res;
          const downloadedFile = new Blob([Res], { type: Res.type });
                const a = document.createElement('a');
                a.setAttribute('style', 'display:none;');
                document.body.appendChild(a);
                a.download = attachment.filename;
                a.href = URL.createObjectURL(downloadedFile);
                a.target = '_blank';
                a.click();
                document.body.removeChild(a);
        },
        err=>{
          throw err;
        })
  }
downloadAttachment(filename){
      this.httpOptions = {
        reportProgress: true,
        responseType: "blob"
      };
      return this.http.get(API_URL, this.httpOptions).pipe(
        map(response => response),
        catchError(this.handleError<any>(isShowError)),
        finalize(() => {

        })
      );    
  }

C# Code

var res=DownloadAttachment(filename);
if (res == null)
   return Content("filename not present");
return  File(res, Utility.GetContentType(filename), filename);