Angularjs download file from ASP.MVC5 passing parameters

Question

Situation: I have an ASP MVC5 API that generates an excel.xlsx and returns it in a Filecontentresult. All in memory, because I can’t save the file to the server disk.It works ok if I access the url directly.

I have an Angularjs application that needs to pass a huge Json to the API and receive the generated file . xlsx.

I’m trying the following:

Controler:

public async Task<FileContentResult> Excel([FromBody]GetGeneralFilterVM operationHistoryFilter = null)
    {
        var ListaOperazioni = await GetListaOperazioniData(operationHistoryFilter);
        var Totals = await GetExcelTotalsData(operationHistoryFilter);

        var excelExport = new ExcelExportEntity(new object[]
            {
                ListaOperazioni,
                Totals,
            });
        var preFile = excelExport.DoExcel();
        var arraybits = preFile;
        var file = File(arraybits, "application/vnd.ms-excel", "OperationHistory.xlsx");

        return file;
    }

Angular:

$scope.exportExcel = () => {
    $.ajax({
        cache: false,
        url: appPath + "controller/Excel",
        data: filter, 
        success: function (response) {
            var file = new Blob([response], { type: "application/vnd.ms-excel" });
                var fileName = "excelFeliz.xlsx";
                saveAs(file, fileName);
            },
            error: function (ajaxContext) {
                alert('Export error: ' + ajaxContext.responseText);
            }
        });
}

Upshot: Thus it even reaches to download a file, however while trying to open it is corrupted.

My insistence on AJAX is because of the Getgeneralfiltervm I’m receiving in the controller, it contains sub-objects with many properties it would be complicated to put this as parameters in the url.

Also I have no way to generate and return a url to download, because I have no way to save the file to the server disk.

Any idea?

Answer 1

After much research I found a way, this yes works 100%. Instead of using AJAX, which seems to have problems with blob, I used a call Xmlhttprequest. Note: Controller not changed.

getExportExcel: function (filter) {

        var json_upload = "operationHistoryFilter=" + JSON.stringify(filter);
        var url = appPath + "OperationHistoryReport/ExcelGeneral";
        var fileName = "excel.xlsx"
        var request = new XMLHttpRequest();
        request.open('POST', url, true);
        request.setRequestHeader('Content-Type', 'application/json');
        request.responseType = 'blob';

        request.onload = function (e) {
            if (this.status === 200) {
                var blob = this.response;
                if (window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveBlob(blob, fileName);
                }
                else {
                    var downloadLink = window.document.createElement('a');
                    var contentTypeHeader = request.getResponseHeader("Content-Type");
                    downloadLink.href = window.URL.createObjectURL(new Blob([blob], { type: contentTypeHeader }));
                    downloadLink.download = fileName;
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    document.body.removeChild(downloadLink);
                }
            }
        };
        request.send(JSON.stringify(filter));
}