Laden Sie die Datei von einer ASP.NET-Web-API-Methode mit AngularJS herunter

In meinem Angular JS-Projekt, ich habe eine <a> Anker-Tags, die, wenn Sie geklickt haben, wird eine HTTP - GET Anfrage zu einem WebAPI-Methode gibt eine Datei an.

Nun möchte ich die Datei heruntergeladen werden, um den Benutzer, sobald die Anforderung erfolgreich. Wie mache ich das?

Anker-tag:

<a href="#" ng-click="getthefile()">Download img</a>

AngularJS:

$scope.getthefile = function () {        
    $http({
        method: 'GET',
        cache: false,
        url: $scope.appPath + 'CourseRegConfirm/getfile',            
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }
    }).success(function (data, status) {
        console.log(data); //Displays text data if the file is a text file, binary if it's an image            
        //What should I write here to download the file I receive from the WebAPI method?
    }).error(function (data, status) {
        //...
    });
}

Meinen WebAPI Methode:

[Authorize]
[Route("getfile")]
public HttpResponseMessage GetTestFile()
{
    HttpResponseMessage result = null;
    var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.jpg");

    if (!File.Exists(localFilePath))
    {
        result = Request.CreateResponse(HttpStatusCode.Gone);
    }
    else
    {
        //Serve the file to the client
        result = Request.CreateResponse(HttpStatusCode.OK);
        result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
        result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
        result.Content.Headers.ContentDisposition.FileName = "SampleImg";                
    }

    return result;
}

InformationsquelleAutor der Frage Amar Duplantier | 2014-06-06

angularjs asp.net-web-api c#html javascript

231

Unterstützung für das herunterladen von binären Dateien in ajax ist nicht groß, es ist sehr viel noch unter Entwicklung als arbeitsvorlagen.

Einfache download-Methode:

Können Sie die browser-download die gewünschte Datei einfach über den code unten, und diese wird in allen Browsern, und natürlich auslösen der WebApi Anfrage genau das gleiche.

$scope.downloadFile = function(downloadPath) { 
    window.open(downloadPath, '_blank', '');  
}

Ajax-binary-download-Methode:

Verwendung von ajax zum download der binären Datei getan werden kann, die in einigen Browsern und unten ist eine Implementierung, die die Arbeit in der neuesten Aromen von Chrome, Internet Explorer, FireFox und Safari.

Er verwendet eine arraybuffer Antwort geben, die wird dann umgewandelt in ein JavaScript -blobdie dann entweder präsentiert Sie sparen mit der saveBlob Methode - aber das ist nur momentan in Internet Explorer - oder sich in ein blob-Daten-URL, die geöffnet wird, durch den browser, Auslösung der download-dialog, wenn Sie den mime-Typ wird unterstützt für die Anzeige im browser.

Internet Explorer 11-Unterstützung (Feste)

Hinweis: Internet Explorer 11 nicht wie mit der msSaveBlob Funktion hätte es die alias - vielleicht ein Sicherheits-feature, sondern eher ein Makel, Also mit var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc. zum ermitteln der verfügbaren saveBlob Unterstützung verursacht eine Ausnahme; daher, warum der folgende code testet jetzt navigator.msSaveBlob getrennt. Dank? Microsoft

//Based on an implementation here: web.student.tuwien.ac.at/~e0427417/jsdownload.html
$scope.downloadFile = function(httpPath) {
    //Use an arraybuffer
    $http.get(httpPath, { responseType: 'arraybuffer' })
    .success( function(data, status, headers) {

        var octetStreamMime = 'application/octet-stream';
        var success = false;

        //Get the headers
        headers = headers();

        //Get the filename from the x-filename header or default to "download.bin"
        var filename = headers['x-filename'] || 'download.bin';

        //Determine the content type from the header or default to "application/octet-stream"
        var contentType = headers['content-type'] || octetStreamMime;

        try
        {
            //Try using msSaveBlob if supported
            console.log("Trying saveBlob method ...");
            var blob = new Blob([data], { type: contentType });
            if(navigator.msSaveBlob)
                navigator.msSaveBlob(blob, filename);
            else {
                //Try using other saveBlob implementations, if available
                var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
                if(saveBlob === undefined) throw "Not supported";
                saveBlob(blob, filename);
            }
            console.log("saveBlob succeeded");
            success = true;
        } catch(ex)
        {
            console.log("saveBlob method failed with the following exception:");
            console.log(ex);
        }

        if(!success)
        {
            //Get the blob url creator
            var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
            if(urlCreator)
            {
                //Try to use a download link
                var link = document.createElement('a');
                if('download' in link)
                {
                    //Try to simulate a click
                    try
                    {
                        //Prepare a blob URL
                        console.log("Trying download link method with simulated click ...");
                        var blob = new Blob([data], { type: contentType });
                        var url = urlCreator.createObjectURL(blob);
                        link.setAttribute('href', url);

                        //Set the download attribute (Supported in Chrome 14+ /Firefox 20+)
                        link.setAttribute("download", filename);

                        //Simulate clicking the download link
                        var event = document.createEvent('MouseEvents');
                        event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
                        link.dispatchEvent(event);
                        console.log("Download link method with simulated click succeeded");
                        success = true;

                    } catch(ex) {
                        console.log("Download link method with simulated click failed with the following exception:");
                        console.log(ex);
                    }
                }

                if(!success)
                {
                    //Fallback to window.location method
                    try
                    {
                        //Prepare a blob URL
                        //Use application/octet-stream when using window.location to force download
                        console.log("Trying download link method with window.location ...");
                        var blob = new Blob([data], { type: octetStreamMime });
                        var url = urlCreator.createObjectURL(blob);
                        window.location = url;
                        console.log("Download link method with window.location succeeded");
                        success = true;
                    } catch(ex) {
                        console.log("Download link method with window.location failed with the following exception:");
                        console.log(ex);
                    }
                }

            }
        }

        if(!success)
        {
            //Fallback to window.open method
            console.log("No methods worked for saving the arraybuffer, using last resort window.open");
            window.open(httpPath, '_blank', '');
        }
    })
    .error(function(data, status) {
        console.log("Request failed with status: " + status);

        //Optionally write the error out to scope
        $scope.errorDetails = "Request failed with status: " + status;
    });
};

Verwendung:

var downloadPath = "/files/instructions.pdf";
$scope.downloadFile(downloadPath);

Hinweise:

Sollten Sie ändern Ihre WebApi Methode zurückgegeben, die folgende überschriften:

Habe ich die x-filename header zu senden, die mit dem Namen. Dies ist eine benutzerdefinierte Kopfzeile für Bequemlichkeit, Sie können sich aber extrahieren den Dateinamen aus der content-disposition header verwenden von regulären Ausdrücken.
Sollten Sie die content-type mime-header für Ihre Antwort zu, so dass der browser weiß, dass die Daten-format.

Ich hoffe, das hilft.

InformationsquelleAutor der Antwort Scott

C# WebApi PDF-download alle arbeiten mit Angular JS-Authentifizierung

Web-Api-Controller

[HttpGet]
    [Authorize]
    [Route("OpenFile/{QRFileId}")]
    public HttpResponseMessage OpenFile(int QRFileId)
    {
        QRFileRepository _repo = new QRFileRepository();
        var QRFile = _repo.GetQRFileById(QRFileId);
        if (QRFile == null)
            return new HttpResponseMessage(HttpStatusCode.BadRequest);
        string path = ConfigurationManager.AppSettings["QRFolder"] + + QRFile.QRId + @"\" + QRFile.FileName;
        if (!File.Exists(path))
            return new HttpResponseMessage(HttpStatusCode.BadRequest);

        HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
        //response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
        Byte[] bytes = File.ReadAllBytes(path);
        //String file = Convert.ToBase64String(bytes);
        response.Content = new ByteArrayContent(bytes);
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
        response.Content.Headers.ContentDisposition.FileName = QRFile.FileName;

        return response;
    }

Angular JS Service

this.getPDF = function (apiUrl) {
            var headers = {};
            headers.Authorization = 'Bearer ' + sessionStorage.tokenKey;
            var deferred = $q.defer();
            $http.get(
                hostApiUrl + apiUrl,
                {
                    responseType: 'arraybuffer',
                    headers: headers
                })
            .success(function (result, status, headers) {
                deferred.resolve(result);;
            })
             .error(function (data, status) {
                 console.log("Request failed with status: " + status);
             });
            return deferred.promise;
        }

        this.getPDF2 = function (apiUrl) {
            var promise = $http({
                method: 'GET',
                url: hostApiUrl + apiUrl,
                headers: { 'Authorization': 'Bearer ' + sessionStorage.tokenKey },
                responseType: 'arraybuffer'
            });
            promise.success(function (data) {
                return data;
            }).error(function (data, status) {
                console.log("Request failed with status: " + status);
            });
            return promise;
        }

Entweder tun

Angular JS-Controller aufrufen der service

vm.open3 = function () {
        var downloadedData = crudService.getPDF('ClientQRDetails/openfile/29');
        downloadedData.then(function (result) {
            var file = new Blob([result], { type: 'application/pdf;base64' });
            var fileURL = window.URL.createObjectURL(file);
            var seconds = new Date().getTime() / 1000;
            var fileName = "cert" + parseInt(seconds) + ".pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = fileURL;
            a.download = fileName;
            a.click();
        });
    };

Und zuletzt die HTML-Seite

<a class="btn btn-primary" ng-click="vm.open3()">FILE Http with crud service (3 getPDF)</a>

Diese wird umgestaltet teilen nur der code, hoffe, es hilft jemand, wie es dauerte eine Weile, bis dies funktioniert.

InformationsquelleAutor der Antwort tfa

Für mich ist die Web-API Schienen-und client-Seite-Winkel verwendet, mit Restangular und FileSaver.js

Web-API

module Api
  module V1
    class DownloadsController < BaseController

      def show
        @download = Download.find(params[:id])
        send_data @download.blob_data
      end
    end
  end
end

HTML

 <a ng-click="download('foo')">download presentation</a>

Winkel-controller

 $scope.download = function(type) {
    return Download.get(type);
  };

Angular Service

'use strict';

app.service('Download', function Download(Restangular) {

  this.get = function(id) {
    return Restangular.one('api/v1/downloads', id).withHttpConfig({responseType: 'arraybuffer'}).get().then(function(data){
      console.log(data)
      var blob = new Blob([data], {
        type: "application/pdf"
      });
      //saveAs provided by FileSaver.js
      saveAs(blob, id + '.pdf');
    })
  }
});

InformationsquelleAutor der Antwort AnkitG

Hatten wir auch eine Lösung zu entwickeln, die würde sogar die Arbeit mit APIs, die eine Authentifizierung erfordern (siehe dieser Artikel)

Mithilfe von AngularJS in einer nussschale ist hier, wie wir es Taten:

Schritt 1: Erstellen einer dedizierten Richtlinie

//jQuery needed, uses Bootstrap classes, adjust the path of templateUrl
app.directive('pdfDownload', function() {
return {
    restrict: 'E',
    templateUrl: '/path/to/pdfDownload.tpl.html',
    scope: true,
    link: function(scope, element, attr) {
        var anchor = element.children()[0];

        //When the download starts, disable the link
        scope.$on('download-start', function() {
            $(anchor).attr('disabled', 'disabled');
        });

        //When the download finishes, attach the data to the link. Enable the link and change its appearance.
        scope.$on('downloaded', function(event, data) {
            $(anchor).attr({
                href: 'data:application/pdf;base64,' + data,
                download: attr.filename
            })
                .removeAttr('disabled')
                .text('Save')
                .removeClass('btn-primary')
                .addClass('btn-success');

            //Also overwrite the download pdf function to do nothing.
            scope.downloadPdf = function() {
            };
        });
    },
    controller: ['$scope', '$attrs', '$http', function($scope, $attrs, $http) {
        $scope.downloadPdf = function() {
            $scope.$emit('download-start');
            $http.get($attrs.url).then(function(response) {
                $scope.$emit('downloaded', response.data);
            });
        };
    }] 
});

Schritt 2: eine Vorlage Erstellen, die

<a href="" class="btn btn-primary" ng-click="downloadPdf()">Download</a>

Schritt 3: Verwenden Sie

<pdf-download url="/some/path/to/a.pdf" filename="my-awesome-pdf"></pdf-download>

Hierdurch werden eine Blaue Taste. Wenn Sie darauf klicken, wird ein PDF heruntergeladen werden (Achtung: das backend hat zu liefern, die PDF in Base64-Kodierung!) und in der href. Die Taste leuchtet grün und wechselt den text zu Speichern. Der Benutzer kann klicken Sie erneut und präsentiert mit einem standard-download-Datei-dialog für die Datei meine-genial.pdf.

InformationsquelleAutor der Antwort aix

Senden Sie Ihre Datei als base64 string.

 var element = angular.element('<a/>');
                         element.attr({
                             href: 'data:attachment/csv;charset=utf-8,' + encodeURI(atob(response.payload)),
                             target: '_blank',
                             download: fname
                         })[0].click();

Wenn attr-Methode funktioniert nicht in Firefox können Sie auch javaScript setAttribute-Methode

InformationsquelleAutor der Antwort PPB

Könnten Sie implementieren ein showfile-Funktion, die Parameter der zurückgegebenen Daten aus der WEBApi, und einen Dateinamen für die Datei, die Sie herunterladen möchten. Was ich Tat, war ein separates browser-Dienst identifiziert den browser des Benutzers und verarbeitet die Wiedergabe der Datei auf den browser. Zum Beispiel, wenn die Ziel-browser ist chrome auf einem ipad, müssen Sie javascript FileReader-Objekt.

FileService.showFile = function (data, fileName) {
    var blob = new Blob([data], { type: 'application/pdf' });

    if (BrowserService.isIE()) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    }
    else if (BrowserService.isChromeIos()) {
        loadFileBlobFileReader(window, blob, fileName);
    }
    else if (BrowserService.isIOS() || BrowserService.isAndroid()) {
        var url = URL.createObjectURL(blob);
        window.location.href = url;
        window.document.title = fileName;
    } else {
        var url = URL.createObjectURL(blob);
        loadReportBrowser(url, window,fileName);
    }
}


function loadFileBrowser(url, window, fileName) {
    var iframe = window.document.createElement('iframe');
    iframe.src = url
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.style.border = 'none';
    window.document.title = fileName;
    window.document.body.appendChild(iframe)
    window.document.body.style.margin = 0;
}

function loadFileBlobFileReader(window, blob,fileName) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var bdata = btoa(reader.result);
        var datauri = 'data:application/pdf;base64,' + bdata;
        window.location.href = datauri;
        window.document.title = fileName;
    }
    reader.readAsBinaryString(blob);
}

InformationsquelleAutor der Antwort Erkin Djindjiev

In der Komponente i ist.e angular js-code:

function getthefile (){
window.location.href='http://localhost:1036/CourseRegConfirm/getfile';
};

InformationsquelleAutor der Antwort Shivani Jadhav

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.