Ответ загрузки WebApi в виде файла

У меня проблема с моим WebApi. В зависимости от запроса ответ возвращается как json или csv. Для сериализации я использую NewtonSoft.Json и свой собственный CsvMediaTypeFormatter. Пока я тестирую его от Postman, ответ работает, как и ожидалось.

Что я борюсь с этим, что я хотел бы заставить браузер сохранить файл, если ответ будет csv. Чтобы добиться этого, в моем CsvMediaTypeFormatter я переопределил метод SetDefaultContentHeaders следующим образом:

public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
{
    base.SetDefaultContentHeaders(type, headers, mediaType);

    headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
                                 {
                                     FileName = "content.csv"
                                 };
}

Когда я тестирую свой API с помощью Postman, я вижу содержимое csv как тело, а заголовки показывают content-disposition: attachment; filename=content.csv.

Но когда он попадает из браузера (я пробовал Firefox, Chrome и Edge), диалоговое окно «Сохранить файл как ...» отсутствует. Однако инструменты разработчика показывают, что вызов выполняется, а ответ имеет значение заголовка content-disposition.

Я пробовал с различными значениями Content-type: text/csv, text/plain, application/octet-stream или application/x-unknown, но безуспешно.

Любые идеи, что я делаю неправильно?


person Szeki    schedule 19.10.2017    source источник


Ответы (1)


Если вы используете какой-либо фреймворк js для выполнения http-вызова, вам может потребоваться вручную выгрузить содержимое в файл. Ниже приведены примеры для AngularJS и Angular2.

УгловойJS:

this.$http(req).success(data => {
    const file = new Blob([data],
        {
            type: "text/csv"
        });

    const a = document.createElement("a");
    a.href = URL.createObjectURL(file);
    a.target = "_blank";
    a.download = `yourfilename.csv`;
    document.body.appendChild(a);
    a.click();
});

Угловой2+

downloadFile(data: Response){
    const file = new Blob([data],
        {
            type: "text/csv"
        });
    var url= window.URL.createObjectURL(blob);
    window.open(url);
}

Как создать и сохранить файл в локальной файловой системе, используя AngularJS?

Как загрузить файл с помощью Angular2

person DIEDZz    schedule 14.12.2017