Télécharger fichier Excel via AJAX MVC

Vous ne pouvez pas retourner directement un fichier à télécharger via un appel AJAX donc, une approche alternative est d'utiliser un appel AJAX pour publier les données relatives à votre serveur. Vous pouvez ensuite utiliser côté serveur de code pour créer le Fichier Excel (je vous conseille d'utiliser EPPlus ou NPOI pour ce bien qu'il semble que si vous avez cette partie de travail).

Mise à JOUR en septembre 2016

Ma réponse originale à cette question (ci-dessous) a été de plus de 3 ans, j'ai donc pensé que je voudrais le mettre à jour comme je n'ai plus de créer des fichiers sur le serveur lors du téléchargement de fichiers via AJAX cependant, j'ai laissé l'original de la réplique comme il peut être de quelque utilité, toujours en fonction de vos besoins spécifiques.

Un scénario courant dans mes applications MVC est de reporting via une page web qui a une certaine configuré par l'utilisateur des paramètres de rapport (Date des Plages, des Filtres, etc.). Lorsque l'utilisateur a spécifié les paramètres de poster sur le serveur, le rapport est généré (disons par exemple un fichier Excel en sortie) et puis je stocker le fichier dans un tableau d'octets dans le TempData seau avec une référence unique. Cette référence est passée à l'arrière comme un Résultat Json à ma fonction AJAX qui, par la suite redirige vers contrôleur séparé d'action pour extraire les données à partir de TempData et de téléchargement à la fin de navigateur d'utilisateurs.

De donner ce plus en détail, en supposant que vous avez un MVC Vue d'un formulaire lié à un Modèle de classe, appelons le Modèle ReportVM.

Tout d'abord, l'action d'un contrôleur est nécessaire pour recevoir posté modèle, un exemple serait:

public ActionResult PostReportPartial(ReportVM model){

   //Validate the Model is correct and contains valid data
   //Generate your report output based on the model parameters
   //This can be an Excel, PDF, Word file - whatever you need.

   //As an example lets assume we've generated an EPPlus ExcelPackage

   ExcelPackage workbook = new ExcelPackage();
   //Do something to populate your workbook

   //Generate a new unique identifier against which the file can be stored
   string handle = Guid.NewGuid().ToString();

   using(MemoryStream memoryStream = new MemoryStream()){
        workbook.SaveAs(memoryStream);
        memoryStream.Position = 0;
        TempData[handle] = memoryStream.ToArray();
   }      

   //Note we are returning a filename as well as the handle
   return new JsonResult() { 
         Data = new { FileGuid = handle, FileName = "TestReportOutput.xlsx" }
   };

}

De l'appel AJAX qui publie mon MVC formulaire ci-dessus pour le contrôleur et reçoit la réponse ressemble à ceci:

$ajax({
    cache: false,
    url: '/Report/PostReportPartial',
    data: _form.serialize(), 
    success: function (data){
         var response = JSON.parse(data);
         window.location = '/Report/Download?fileGuid=' + response.FileGuid 
                           + '&filename=' + response.FileName;
    }
})

L'action du contrôleur pour gérer le téléchargement du fichier:

[HttpGet]
public virtual ActionResult Download(string fileGuid, string fileName)
{   
   if(TempData[fileGuid] != null){
        byte[] data = TempData[fileGuid] as byte[];
        return File(data, "application/vnd.ms-excel", fileName);
   }   
   else{
        //Problem - Log the error, generate a blank file,
        //          redirect to another controller action - whatever fits with your application
        return new EmptyResult();
   }
}

Un autre changement qui pourrait facilement être logés si besoin est de passer le Type MIME du fichier d'un troisième paramètre pour que le Contrôleur de l'action pourrait servir correctement une variété de formats de fichiers de sortie.

Cela supprime toute nécessité de physique des fichiers créés et stockés sur le serveur, donc pas de ménage routines nécessaires et une fois de plus c'est transparent pour l'utilisateur final.

Remarque, l'avantage de l'utilisation de TempData plutôt que Session est qu'une fois TempData est de lire les données sont effacées de sorte qu'il sera plus efficace en termes d'utilisation de la mémoire si vous avez un volume élevé de demandes de fichiers. Voir TempData Les Meilleures Pratiques.

Réponse ORIGINALE à cette question

Vous ne pouvez pas retourner directement un fichier à télécharger via un appel AJAX donc, une approche alternative est d'utiliser un appel AJAX pour publier les données relatives à votre serveur. Vous pouvez ensuite utiliser côté serveur de code pour créer le Fichier Excel (je vous conseille d'utiliser EPPlus ou NPOI pour ce bien qu'il semble que si vous avez cette partie de travail).

Une fois que le fichier a été créé sur le serveur passe en arrière le chemin d'accès au fichier (ou simplement le nom de fichier) comme valeur de retour de votre appel AJAX et puis définissez le JavaScript window.location à cette URL, ce qui invite le navigateur à télécharger le fichier.

À partir de la fin les utilisateurs point de vue, l'opération de téléchargement de fichier est transparente comme ils n'ont jamais quitter la page sur laquelle la demande émane.

Ci-dessous est un simple exemple artificiel d'un appel ajax pour réaliser ceci:

$.ajax({
    type: 'POST',
    url: '/Reports/ExportMyData', 
    data: '{ "dataprop1": "test", "dataprop2" : "test2" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (returnValue) {
        window.location = '/Reports/Download?file=' + returnValue;
    }
});

• url paramètre est le Contrôleur de la méthode d'Action où votre code va créer le fichier Excel.
• données paramètre contient les données json qui serait extraite de la forme.
• returnValue serait le nom de fichier que vous venez de créer un fichier Excel.
• La fenêtre.emplacement commande redirige vers le Contrôleur/Action de la méthode qui restaure votre fichier pour le téléchargement.

Un exemple de la méthode du contrôleur pour le Téléchargement de l'action serait:

[HttpGet]
public virtual ActionResult Download(string file)
{   
  string fullPath = Path.Combine(Server.MapPath("~/MyFiles"), file);
  return File(fullPath, "application/vnd.ms-excel", file);
}

J'ai récemment été en mesure d'accomplir ceci dans MVC (bien qu'il n'y avait pas besoin d'utiliser AJAX), sans création d'un fichier physique et j'ai pensé partager mon code:

Super simple fonction JavaScript (datatables.net cliquez sur le bouton qui déclenche ce):

function getWinnersExcel(drawingId) {
    window.location = "/drawing/drawingwinnersexcel?drawingid=" + drawingId;
}

C# code de Contrôleur:

    public FileResult DrawingWinnersExcel(int drawingId)
    {
        MemoryStream stream = new MemoryStream(); //cleaned up automatically by MVC
        List<DrawingWinner> winnerList = DrawingDataAccess.GetWinners(drawingId); //simple entity framework-based data retrieval
        ExportHelper.GetWinnersAsExcelMemoryStream(stream, winnerList, drawingId);

        string suggestedFilename = string.Format("Drawing_{0}_Winners.xlsx", drawingId);
        return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml", suggestedFilename);
    }

Dans le ExportHelper classe j'utilise un outil 3ème partie (GemBox.Feuille de calcul) pour générer le fichier Excel et il a une sauvegarde de Flux en option. Cela étant dit, il ya un certain nombre de façons de créer des fichiers Excel qui peut facilement être écrit pour un flux de mémoire.

public static class ExportHelper
{
    internal static void GetWinnersAsExcelMemoryStream(MemoryStream stream, List<DrawingWinner> winnerList, int drawingId)
    {

        ExcelFile ef = new ExcelFile();

        //lots of excel worksheet building/formatting code here ...

        ef.SaveXlsx(stream);
        stream.Position = 0; //reset for future read

     }
}

Dans IE, Chrome et Firefox, le navigateur vous invite à télécharger le fichier et pas de navigation réelle se produit.

D'abord Créer le contrôleur d'action qui permettra de créer le Fichier Excel

[HttpPost]
public JsonResult ExportExcel()
{
    DataTable dt = DataService.GetData();
    var fileName = "Excel_" + DateTime.Now.ToString("yyyyMMddHHmm") + ".xls";

    //save the file to server temp folder
    string fullPath = Path.Combine(Server.MapPath("~/temp"), fileName);

    using (var exportData = new MemoryStream())
    {
        //I don't show the detail how to create the Excel, this is not the point of this article,
        //I just use the NPOI for Excel handler
        Utility.WriteDataTableToExcel(dt, ".xls", exportData);

        FileStream file = new FileStream(fullPath, FileMode.Create, FileAccess.Write);
        exportData.WriteTo(file);
        file.Close();
    }

    var errorMessage = "you can return the errors in here!";

    //return the Excel file name
    return Json(new { fileName = fileName, errorMessage = "" });
}

puis créer le Téléchargement d'action

[HttpGet]
[DeleteFileAttribute] //Action Filter, it will auto delete the file after download, 
                      //I will explain it later
public ActionResult Download(string file)
{
    //get the temp folder and file path in server
    string fullPath = Path.Combine(Server.MapPath("~/temp"), file);

    //return the file for download, this is an Excel 
    //so I set the file content type to "application/vnd.ms-excel"
    return File(fullPath, "application/vnd.ms-excel", file);
}

si vous souhaitez supprimer le fichier après l'avoir téléchargé créer cette

public class DeleteFileAttribute : ActionFilterAttribute
{
    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        filterContext.HttpContext.Response.Flush();

        //convert the current filter context to file and get the file path
        string filePath = (filterContext.Result as FilePathResult).FileName;

        //delete the file after download
        System.IO.File.Delete(filePath);
    }
}

et enfin appel ajax de vous MVC, Razor vue

//I use blockUI for loading...
$.blockUI({ message: '<h3>Please wait a moment...</h3>' });    
$.ajax({
    type: "POST",
    url: '@Url.Action("ExportExcel","YourController")', //call your controller and action
    contentType: "application/json; charset=utf-8",
    dataType: "json",
}).done(function (data) {
    //console.log(data.result);
    $.unblockUI();

    //get the file name for download
    if (data.fileName != "") {
        //use window.location.href for redirect to download action for download the file
        window.location.href = "@Url.RouteUrl(new 
            { Controller = "YourController", Action = "Download"})/?file=" + data.fileName;
    }
});

$.ajax({ 
type: "GET", 
url: "/Home/Downloadexcel/", 
contentType: "application/json; charset=utf-8", 
données: null, 
success: function (Rdata) { 
débogueur; 
var octets = new Uint8Array(Rdata.FileContents); 
var blob = new Blob([octets], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.la feuille" }); 
var lien = document.createElement('a'); 
lien.href = fenêtre.URL.createObjectURL(blob); 
lien.télécharger = "myFileName.xlsx"; 
lien.cliquez sur(); 
}, 
error: function (err) { 

} 

}); 

CSL réponse a été mise en œuvre dans un projet que je suis en train de travailler sur mais le problème que j'ai encouru était mise à l'échelle sur Azure cassé notre téléchargements de fichiers. Au lieu de cela, j'ai été capable de le faire avec un appel AJAX:

SERVEUR

[HttpPost]
public FileResult DownloadInvoice(int id1, int id2)
{
    //necessary to get the filename in the success of the ajax callback
    HttpContext.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

    byte[] fileBytes = _service.GetInvoice(id1, id2);
    string fileName = "Invoice.xlsx";
    return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
}

CLIENT
(version modifiée de Poignée de téléchargement de fichier de l'ajax post)

$("#downloadInvoice").on("click", function() {
$("#loaderInvoice").removeClass("d-none");
var xhr = new XMLHttpRequest();
var params = [];
xhr.open('POST', "@Html.Raw(Url.Action("DownloadInvoice", "Controller", new { id1 = Model.Id1, id2 = Model.Id2 }))", true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
if (this.status === 200) {
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var blob = typeof File === 'function'
? new File([this.response], filename, { type: type })
: new Blob([this.response], { type: type });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
//IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
//use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
//safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location = downloadUrl;
}
setTimeout(function() {
URL.revokeObjectURL(downloadUrl);
$("#loaderInvoice").addClass("d-none");
}, 100); //cleanup
}
}
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params));
});

Je suis en utilisant Asp.Net WebForm et juste je veux télécharger un fichier à partir du serveur de côté. Il y a beaucoup d'article mais je ne trouve pas juste de base de la réponse.
Maintenant, j'ai essayé un moyen de base et l'a obtenu.

C'est mon problème.

J'ai créer un grand nombre de bouton d'entrée dynamiquement à l'exécution. Et je tiens à ajouter chaque bouton de bouton de téléchargement de donner un unique fichier number.

Je crée chaque bouton comme ceci:

JS:

fragment += "<div><input type=\"button\" value=\"Create Excel\" onclick=\"CreateExcelFile(" + fileNumber + ");\" /></div>";

Chaque bouton appeler cette méthode ajax.

JS:

$.ajax({
type: 'POST',
url: 'index.aspx/CreateExcelFile',
data: jsonData,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (returnValue) {
window.location = '/Reports/Downloads/' + returnValue.d;
}
});

Ensuite, j'ai écrit une base simple méthode.

[WebMethod]
public static string CreateExcelFile2(string fileNumber)
{
string filePath = string.Format(@"Form_{0}.xlsx", fileNumber);
return filePath;
}

Je suis de la génération de ce Form_1, Form_2, Form_3.... Et je vais supprimer cette ancienne des fichiers avec un autre programme. Mais si il y a un moyen de l'envoi de tableau d'octets à télécharger le fichier comme l'utilisation de la Réponse. Je veux l'utiliser.

J'espère que ce sera utile pour tout le monde.