générer csv à partir de mvc, web api httpresponse et la recevoir par angularjs pour le télécharger

Je suis en train de générer un fichier CSV à partir de mon api web et de recevoir par angularjs. J'ai une API contrôleur comme ci-dessous:

 [HttpPost]
    public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
    {
        var output = new byte[] { };
        if (fieldParams!= null)
        {
            using (var stream = new MemoryStream())
            {
                this.Serialize(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 = "Fields.csv"
        };
        return result;
    }

Dans mon angularjs, j'ai ceci:

$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) {
            console.log(content);

            //only creates a csv file with "[object Object]" written in it
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(content.Parameters);
            hiddenElement.target = '_blank';
            hiddenElement.download = 'myFile.csv';
            hiddenElement.click();
        });
    };

Permet de dire par exemple, dans mon API contrôleur, le contenu de la réponse est

sortie

{byte[152]}

[0]: 83

[1]: 101

[2]: 44

[3]: 67

[4]: 10

Lorsque je reçois ce dans angularjs et j'ai mis la valeur de content dans le journal de la console (chrome), c'est ce que j'obtiens:

{Paramètres: Tableau[1], $promesse: Objet, $résolu: true, $get: function, $économisez: fonction...}

0:"S"

1: "e"

2: ","

3: "C"

4: "↵"

$promesse: objet

$résolu: true`

Pourquoi le content reçu dans le angularjs contenir des caractères
déjà au lieu d'un octet de tableau?
Comment puis-je contrôler la content de telle manière que je n'utilise que des
le csv des données et la suppression de $promise et $resolved? Pourquoi sont-ils inclus dans la première place? Comment les supprimer?
Quelle est la bonne façon de générer un fichier csv si ce que je fais est
de mal? 😐

OriginalL'auteur raberana | 2013-11-30

Oublié de mettre à jour, mais j'ai maintenant trouvé un moyen de résoudre ce problème:

Il y aura deux API, un (POST) rappelez-vous que les données soient utilisées dans le traitement et un autre (OBTENIR) qui dispensera le fichier.

POST:

    [HttpPost]
    public async Task<HttpResponseMessage> BuildFile(FileParameters fileParams)
    {
        var guid = Guid.NewGuid().ToString();
        if (fileParams!= null)
        {
            await Task.Run(() => FileContents.Add(guid, fileParams));
            return this.Request.CreateResponse(HttpStatusCode.OK, new { Value = guid });
        }
        return this.Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Invalid data");
    }

Dans AngularJs, n'oubliez pas le guid est retourné et la transmettre à une autre api:

 location.href = '/api/file/generatefile' + '?guid=' + generatedGuidFromAPI + '&reportName=' + $scope.reportName;

Et voici le generatefile API contrôleur MVC:

OBTENIR:

  [HttpGet]
    public async Task<HttpResponseMessage> GenerateFile(string guid, string reportName)
    {
        byte[] output = null;
        if (FileContents.ContainsKey(guid))
        {
            await Task.Run(() =>
            {
                using (var stream = new MemoryStream())
                {
                    this.CreateFile(FileContents[guid], stream);
                    stream.Flush();
                    output = stream.ToArray();
                }
            });
        }

        FileContents.Remove(guid);
        if (output != null)
        {
            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 = reportName + ".csv"
            };
            return result;
        }

        return this.Request.CreateErrorResponse(HttpStatusCode.NoContent, "No record found");
    }

à l'aide de location.href entraîne le navigateur pour télécharger automatiquement le fichier, vous demandant de choisir d'enregistrer ou non.

mais il utilise de la mémoire du serveur... toutes les autres réponses??

OriginalL'auteur raberana

Voici comment je le fais: (testé dans chrome)

    //WebAPI controller action
public IHttpActionResult Get(string rpt, DateTime date)
{
List<DailyMIReportViewModel> list = new List<DailyMIReportViewModel>();
//Do some stuff to generate list of items
//Download Requested
if (rpt == "dailymidl")
{
//Create byte array of csv
byte[] csvData = WriteCsvWithHeaderToMemory(list);
//create FileContentResult of cdv byte array
FileContentResult result = new FileContentResult(csvData, "application/octet-stream");
//set filename in FileContentResult
result.FileDownloadName = "Report.csv";
return Ok(result);
}
//Data Requested
return Ok(list);
//Client-side angularjs
//Called on button click
$scope.generateMIDownload = function (forDate) {
//Using $resource to return promise with FileContentResult payload
reportsRepository.dailymidl(forDate).$promise.then(
function (data) {
//ok
//NOTE: the base64 part is what got it working
var dataUrl = 'data:application/octet-stream;base64,' + data.FileContents
var link = document.createElement('a');
angular.element(link)
.attr('href', dataUrl)
.attr('download', data.FileDownloadName)
.attr('target','_blank')
link.click();
},
function (response) {
//not ok
});
}
//Reports Repository (for ref)
angular.module('msgnr').factory('reportsRepository', function ($resource) {
return {
dailymidl: function (date) {
return $resource('/api/Report/', { rpt: 'dailymidl', date: date, toDate: date }).get();
}
}
});

Encas il aide quelqu'un d'autre.

Vous faites un async d'appel de serveur à l'aide de $de ressources et d'obtenir le csv/excel des données dans le successfunction et puis, quand l'ancre sur qui est invoqué, il N'est PAS de faire un serveur téléphonique à ce point, ça montre juste le fichier???? il travaillera sans le target=_blank depuis bloqueurs de pop-ups peuvent tapage à ce sujet? Je n'ai pas utilisé de dollars de ressources avant et nos angulaire infrustructure est rendue abstraite, mais je suis sûr que je pourrais l'obtenir si je le voulais. Est-il une limitation de la longueur sur cette dataUrl? Pouvez longs ralentir le navigateur? tout code que vous pouvez montrer au sujet de la reportsRepository
Vous avez raison de l'appel asynchrone au serveur à l'aide de $ressources et les ancrages, cliquez sur ne pas faire un autre appel juste présente le fichier. Cela fonctionne très bien sans target=_blank. Il y a des restrictions de longueur de données sur une url, mais ses déterminé par le navigateur. Je crois que Chrome est de 2 mo. J'ai édité mon précédent réponse à inclure la reportsRepository

OriginalL'auteur itaylorweb

Vous devez vous connecter pour publier un commentaire.