Вызов WEB API для загрузки файла Excel - PullRequest
0 голосов
/ 25 января 2019

ниже - C # WEB API Code для генерации Excel:

public class FileExportController : ApiController
{

    [HttpGet]
    public HttpResponseMessage Get()
    {
        var callerContext = CallerContext.DefaultCallerContext;
        ReportingInput userInput = new ReportingInput();
        userInput.ClientOneCode = "AVON";
        string handle = Guid.NewGuid().ToString();
        var @event = new GetJobReprotDataBlEvent(callerContext, userInput);
        WebApiApplication.ApplicationInitializerObj.EventBus.Publish(@event);
        XLWorkbook wb = new FileExportEngine().ExportExcel(@event.ReportData); //this is returning XLWorkbook
        string fileName = "JobReport_" + DateTime.Now.ToString("yyyy -MM-dd HH':'mm':'ss") + ".xlsx";
        using (MemoryStream memoryStream = new MemoryStream())
        {
            wb.SaveAs(memoryStream);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new ByteArrayContent(memoryStream.ToArray())
            };
            result.Content.Headers.ContentDisposition =
                new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                {
                    FileName = fileName
                };
            result.Content.Headers.ContentType =
                new MediaTypeHeaderValue("application/octet-stream");

            return result;
        }

    }

Когда я вызываю этот API из браузера, я могу создать файл Excel. http://localhost/ETLScheduler/api/FileExport - работает при прямом нажатии в браузере

Теперь я хочу использовать этот API-интерфейс в приложении Angular 5. У меня есть кнопка. При нажатии на кнопку я вызываю метод компонента downloadFile () для загрузки файла. Ниже приведен код:

downloadReport() {     
    this._service.downloadJobReport('AVON');
}

где downloadJobReport () находится в моем служебном файле, как показано ниже:

downloadJobReport(clientCode: string) {
    return this._http.get(APIs.downloadJobReport);
}

Когда я запускаю приложение и нажимаю кнопку Загрузить, я ничего не получаю, я имею в виду, что файл не загружается. Может кто-нибудь иметь представление, как я должен обновить мой угловой код, чтобы использовать API.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Как вы упомянули выше в комментариях, вы используете ниже угловой код для загрузки файла:

 downloadFile(data: Blob) { 
    const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; 
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

Поскольку я также пробовал этот код, он работает в браузере Chrome, но не работает в IE и Edge.

Вы можете обновить свой метод, как показано ниже:

var downloadFile=function (file_name, content) {
var csvData = new Blob([content], { type: 'text/csv' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(csvData, file_name);
} else { // for Non-IE (chrome, firefox etc.)
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    var csvUrl = URL.createObjectURL(csvData);
    a.href =  csvUrl;
    a.download = file_name;
    a.click();
    URL.revokeObjectURL(a.href)
    a.remove();
}

};

Вы можете обратиться по ссылке ниже для получения дополнительной информации:

Открытые ссылки, созданные createObjectURL в IE11

0 голосов
/ 25 января 2019

Проблема в том, что Angular ожидает JSON в результате. Вам нужно настроить свой запрос GET так, чтобы он ожидал чего-то другого.

public downloadJobReport(clientCode: string)): Observable<Blob> {   
    return this._http.get(APIs.downloadJobReport, { responseType: 'blob' });
}

Просто крошечный вопрос, вы передаете аргумент clientCode в downloadJobReport, но никогда не используете его. Может быть, стоит оставить это без внимания?

...