Download Excel-Datei via AJAX MVC

Können Sie nicht direkt zurück eine Datei für den download über ein AJAX-Aufruf, so dass ein alternativer Ansatz ist die Verwendung eines AJAX-Aufrufs, um post-Daten zu deinem server. Sie können dann verwenden Sie server-side-code zum erstellen der Excel-Datei (ich würde empfehlen, mit EPPlus oder NPOI für das, auch wenn es so klingt, als wenn Sie an diesem Teil arbeiten).

UPDATE September 2016

Meine ursprüngliche Antwort (unten) wurde über 3 Jahre alt, so dass ich dachte, ich würde aktualisieren, wie ich nicht mehr erstellen, Dateien auf dem server beim herunterladen von Dateien via AJAX allerdings habe ich Links die original-Antwort, wie es Ihnen von nutzen sein kann noch, je nach Ihren spezifischen Anforderungen.

Ein häufiges Szenario in meinem MVC-Anwendungen ist die Berichterstattung über eine web-Seite, die einige Benutzer konfigurierten report-Parameter (Datum Reicht, Filter etc.). Wenn der Benutzer angegeben hat, die Parameter, die Sie post an den server, der den Bericht generiert (sagen wir zum Beispiel eine Excel-Datei als output) und habe dann speichern Sie die resultierende Datei als byte-array in die TempData Eimer mit einer eindeutigen Referenz. Diese Referenz wird übergeben, wie ein Json-Ergebnis an meine AJAX-Funktion, die anschließend leitet zu einer separaten controller-action zum extrahieren der Daten aus TempData herunterladen und auf den Endbenutzer-browser.

Zu geben, diese genauer, vorausgesetzt, Sie haben eine MVC-Ansicht, die eine form gebunden, um eine Model-Klasse, nennen wir das Modell ReportVM.

Erste, eine controller-Aktion ist erforderlich, um zu empfangen, werden die gebuchten Modells, ein Beispiel wäre:

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" }
   };

}

Den AJAX-Aufruf, Beiträge mein MVC-form, um die oben genannten controller, und erhält die Antwort sieht wie folgt aus:

$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;
    }
})

Die controller-action zu handhaben, das Download der Datei:

[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();
   }
}

Einer anderen änderung kann leicht angepasst werden, wenn erforderlich ist das bestehen der MIME-Typ der Datei als Dritten parameter so, dass der eine Controller-Aktion könnte richtig servieren eine Vielzahl von Ausgabe-Datei-Formate.

Dies beseitigt die Notwendigkeit für physische Dateien erstellt und auf dem server gespeichert, so dass keine Zimmerreinigung Routinen benötigt und noch einmal dies ist für den Endbenutzer nahtlose.

Hinweis, der Vorteil der Verwendung TempData eher als Session ist, dass, sobald TempData ist, Lesen Sie die Daten gelöscht, so wird es effizienter in Bezug auf die Speichernutzung, wenn Sie eine große Anzahl von Datei-Anfragen. Sehen TempData Best Practice.

URSPRÜNGLICHE Antwort

Können Sie nicht direkt zurück eine Datei für den download über ein AJAX-Aufruf, so dass ein alternativer Ansatz ist die Verwendung eines AJAX-Aufrufs, um post-Daten zu deinem server. Sie können dann verwenden Sie server-side-code zum erstellen der Excel-Datei (ich würde empfehlen, mit EPPlus oder NPOI für das, auch wenn es so klingt, als wenn Sie an diesem Teil arbeiten).

Sobald die Datei erstellt wurde, auf dem server wieder übergeben Sie den Pfad zu der Datei (oder nur Dateinamen) als den return-Wert auf den AJAX-Aufruf und legen Sie dann die JavaScript - window.location zu dieser URL, die aufgefordert wird, den browser zum download der Datei.

Aus der Endbenutzer-Perspektive, die Datei download-Vorgang ist nahtlos, da Sie nie verlassen die Seite, auf der die Anfrage stammt.

Unten ist ein einfaches erfundenes Beispiel für eine ajax-call um dies zu erreichen:

$.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 parameter ist die Controller - /Action-Methode, wo Sie Ihren code erstellen der Excel-Datei.
• Daten parameter enthält die json-Daten, die extrahiert aus der form.
• returnValue wäre der Dateiname der neu erstellten Excel-Datei.
• Die Fenster.Lage Befehl leitet Sie an die Controller/Action-Methode, die tatsächlich zurück Ihre Datei zum download.

Einer Probe controller-Methode für die Download-Aktion wäre:

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

InformationsquelleAutor CSL

Ich war vor kurzem in der Lage, dies zu erreichen in MVC (obwohl es keine Notwendigkeit für die Verwendung von AJAX), ohne eine physikalische Datei und dachte, ich würde teilen mein code:

Super einfache JavaScript-Funktion, die datatables.net klicken Sie auf die Schaltfläche löst diese):

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

C# - Controller-code:

    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);
    }

In der ExportHelper Klasse ich tun, verwenden Sie eine 3rd-party-tool (GemBox.Arbeitsblatt) zu generieren, die Excel-Datei, und es hat eine Save-Stream-option. That being said, es gibt eine Reihe von Möglichkeiten zum erstellen von Excel-Dateien, die leicht sein können geschrieben werden, um ein Speicher-stream.

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

     }
}

In IE, Chrome und Firefox, der browser aufgefordert, die Datei zu downloaden und keine eigentliche navigation erfolgt.

InformationsquelleAutor Andy S

Zunächst Erstellen Sie die controller-Aktion, erstellen Sie die Excel-Datei

[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 = "" });
}

erstellen Sie dann die Download-Aktion

[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);
}

wenn Sie möchten, um die Datei zu löschen, nachdem Sie heruntergeladen erstellen dieser

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);
    }
}

und schließlich ajax-Aufruf aus, die Sie MVC Razor-Ansicht

//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;
    }
});

InformationsquelleAutor Elvin Acevedo

CSL ' s Antwort war, umgesetzt in ein Projekt an dem ich arbeite, aber das problem, das ich angefallen wurde die Skalierung auf Azure brach unsere Datei-downloads. Statt dessen war ich in der Lage, dies zu tun mit einem AJAX-Aufruf:

SERVER

[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
(modifizierte version von Handle-Datei-download von 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));
});

InformationsquelleAutor wilsjd

$.ajax({ 
type: "GET", 
url: "/Home/Downloadexcel/", 
contentType: "application/json; charset=utf-8", 
Daten: null, 
Erfolg: Funktion (Rdata) { 
debugger; 
var bytes = new Uint8Array(Rdata.FileContents); 
var blob = new Blob([bytes], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.Blatt" }); 
var link = document.createElement('a'); 
link.href = " Fenster.URL.createObjectURL(blob); 
link.download = "myFileName.xlsx"; 
link.klicken Sie(); 
}, 
error: function (err) { 

} 

}); 

InformationsquelleAutor G.V.K.RAO