从 angular js 中的 web api 下载 csv 文件 [英] download csv file from web api in angular js

问题描述

我的 API 控制器返回一个 csv 文件，如下所示:

my API controller is returning a csv file as seen below:

    [HttpPost]
    public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
    {
        var output = new byte[] { };
        if (fieldParams!= null)
        {
            using (var stream = new MemoryStream())
            {
                this.SerializeSetting(fieldParams, stream);
                stream.Flush();
                output = stream.ToArray();
            }
        }
        var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "File.csv"
        };
        return result;
    }

和我将发送和接收 csv 文件的 angularjs 如下所示:

and my angularjs that will send and receive the csv file is shown below:

$scope.save = function () {
            var csvInput= extractDetails();

            // File is an angular resource. We call its save method here which
            // accesses the api above which should return the content of csv
            File.save(csvInput, function (content) {
                var dataUrl = 'data:text/csv;utf-8,' + encodeURI(content);
                var hiddenElement = document.createElement('a');
                hiddenElement.setAttribute('href', dataUrl);
                hiddenElement.click();
            });
        };

在 chrome 中，它下载一个名为 document 但没有文件类型扩展名的文件.文件内容为[Object object].

In chrome, it downloads a file which is called document but has no file type extension. The content of the file is [Object object].

在 IE10 中，不会下载任何内容.

In IE10, nothing is downloaded.

我能做些什么来解决这个问题?

What could i do to fix this?

更新:这可能对你们有同样问题的人有用:链接

UPDATE: This might work for you guys out there with the same problem: link

推荐答案

试试看:

File.save(csvInput, function (content) {
    var hiddenElement = document.createElement('a');

    hiddenElement.href = 'data:attachment/csv,' + encodeURI(content);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'myFile.csv';
    hiddenElement.click();
});

基于这个问题中最优秀的答案

这篇关于从 angular js 中的 web api 下载 csv 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！