Comment télécharger un fichier CSV à partir d'ASP.NET Web Api à l'aide de l'appel jQuery Ajax

Je suis en train de travailler sur la façon de télécharger le fichier CSV à partir de ASP.NET Web Api de jQuery ajax appel. Le fichier CSV est généré dynamiquement à partir de l'API Web server fondées sur la coutume CsvFormatter.

Ajax de jQuery:

   $.ajax({
        type: "GET",
        headers: {
            Accept: "text/csv; charset=utf-8",
        },
        url: "/api/employees",
        success: function (data) {
        }
    });

Sur le serveur, le EmployeeCsvFormatter est mis en œuvre similaires ci-dessous l'article, dérivé de BufferedMediaTypeFormatter:

http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters

public class EmployeeCsvFormatter : BufferedMediaTypeFormatter
{
    public EmployeeCsvFormatter()
    {
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/csv"));
    }
    ...
}

J'ai également ajouté de remplacer la méthode pour indiquer que je tiens à télécharger comme normale pour télécharger le fichier (voir le fichier à télécharger dans l'onglet téléchargement):

 public override void SetDefaultContentHeaders(Type type, 
    HttpContentHeaders headers, MediaTypeHeaderValue mediaType)       
{
    base.SetDefaultContentHeaders(type, headers, mediaType);
    headers.Add("Content-Disposition", "attachment; filename=yourname.csv");
    headers.ContentType =  new MediaTypeHeaderValue("application/octet-stream");
}

Mais il ne fonctionne pas, le fichier à télécharger n'est pas montré dans la barre d'état ou dans l'onglet télécharger sur google Chrome, même si de Fiddler, je vois la réponse semble correct:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/11.0.0.0
Date: Mon, 11 Mar 2013 08:19:35 GMT
X-AspNet-Version: 4.0.30319
Content-Disposition: attachment; filename=yourname.csv
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Content-Type: application/octet-stream
Content-Length: 26
Connection: Close

1,Cuong,123
1,Trung,123

Ma méthode de ApiController:

public EmployeeDto[] Get()
{
    var result = new[]
               {
                   new EmployeeDto() {Id = 1, Name = "Cuong", Address = "123"},
                   new EmployeeDto() {Id = 1, Name = "Trung", Address = "123"},
               };

    return result;
}

Il doit y avoir un problème quelque part que je n'ai pas compris. Comment puis-je le faire fonctionner en téléchargeant le fichier CSV comme "normal"?

source d'informationauteur Cuong Le

  1. 15

    Plugin jQuery pour la demande de l'Ajax comme les Téléchargements de Fichiers il le fait sans Ajax à l'aide d'un simple formulaire de soumission.

    En interne:

    jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
    .appendTo('body').submit().remove()

    Il a un style ajax d'une interface à partir de l'extérieur, vous pouvez l'appeler comme cela

    $.download('/api/employees','format=csv');

    Une autre approche simple à l'aide de:

    $('#btnDownload').click(function (e) {
    e.preventDefault();
    window.location = "/api/employees?format=csv";
});

    Sur le serveur, MediaTypeMappings doit être utilisé par l'ajout d'un constructeur:

        public EmployeeCsvFormatter(MediaTypeMapping mediaTypeMapping)
        : this()
    {
        MediaTypeMappings.Add(mediaTypeMapping);
    }

    Ensuite, ajoutez ce module de formatage dans l'Api Web de configuration:

       configuration.Formatters.Add(new EmployeeCsvFormatter
            (new QueryStringMapping("format", "csv", "text/csv")));
  2. 3

    Comme une approche alternative, on peut proposer de la télécharger sur le clic d'un point d'ancrage () ou le bouton avec l'URL demandé de définir la méthode de l'API qui répond avec la pièce jointe.

    Dans le CsvMediaTypeFormatter (Dérivé du Système.Net.Http.La mise en forme.MediaTypeFormatter), en plus de la cartographie du texte/csv type MIME comme indiqué dans les réponses ci-dessus, j'ai trouvé les informations suivantes doivent être effectuées:

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
            base.SetDefaultContentHeaders(type, headers, mediaType);
            headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = string.Concat("data", DateTime.UtcNow.ToString("yyyyMMddhhmmss"), ".csv")
            };

            headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        }

    Remarque: Lors de l'écriture du flux, de définir la Content-Length en-tête et n'oubliez pas de vider le flux. J'ai trouvé que, sans un appel à Flush()la réponse renvoyée ne pas le faire revenir avec succès sur le client même lorsque le contenu de la longueur a été définie.

  3. 1

    Vous pouvez également définir l'en-tête de requête dans beforeSend en modifiant le xhr.

        $.ajax({
    url: "/api/employees",
    type: "GET",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Accept", "text/csv");
    },
    success: function (data) {
            }
    });