Как загрузить файл с помощью AngularJS и вызвать API MVC?

Ответ 1

У меня была та же проблема. Решила его, используя библиотеку javascript под названием FileSaver

Просто позвоните

saveAs(file, 'filename');

Полный HTTP-запрос:

$http.post('apiUrl', myObject, { responseType: 'arraybuffer' })
  .success(function(data) {
            var file = new Blob([data], { type: 'application/pdf' });
            saveAs(file, 'filename.pdf');
        });

Ответ 2

Здесь у вас есть http-запрос angularjs к API, который должен сделать любой клиент. Просто адаптируйте URL и параметры WS (если есть) к вашему случаю. Это смесь между ответом Naoe и этим:

$http({
    url: '/path/to/your/API',
    method: 'POST',
    params: {},
    headers: {
        'Content-type': 'application/pdf',
    },
    responseType: 'arraybuffer'
}).success(function (data, status, headers, config) {
    // TODO when WS success
    var file = new Blob([data], {
        type: 'application/csv'
    });
    //trick to download store a file having its URL
    var fileURL = URL.createObjectURL(file);
    var a = document.createElement('a');
    a.href = fileURL;
    a.target = '_blank';
    a.download = 'yourfilename.pdf';
    document.body.appendChild(a); //create the link "a"
    a.click(); //click the link "a"
    document.body.removeChild(a); //remove the link "a"
}).error(function (data, status, headers, config) {
    //TODO when WS error
});

Пояснение к коду:

1. Angularjs запрашивает файл .pdf по URL: /path/to/your/API.
2. Успех получен по ответу
3. Мы выполняем трюк с помощью JavaScript на front-end:
   • Создайте ссылку html ta: <a>.
   • Щелкните тег <a> гиперссылки, используя функцию JS click()
4. Удалите HTML-тег <a> после его нажатия.

Ответ 3

за разные сообщения... вы не можете запускать загрузку через XHR. Мне нужно было выполнить условие для загрузки, так что Мое решение было:

//make the call to the api with the ID to validate
someResource.get( { id: someId }, function(data) {
     //confirm that the ID is validated
     if (data.isIdConfirmed) {
         //get the token from the validation and issue another call
         //to trigger the download
         window.open('someapi/print/:someId?token='+ data.token);
     }
});

Я хочу, чтобы так или иначе, или когда-нибудь загрузку можно запустить с помощью XHR, чтобы избежать второго вызова.//_e

Ответ 4

Есть два способа сделать это в angularjs..

1) Прямым перенаправлением на ваш сервисный вызов.

<a href="some/path/to/the/file">clickme</a>

2) Отправляя скрытую форму.

$scope.saveAsPDF = function() {
    var form = document.createElement("form");
    form.setAttribute("action", "some/path/to/the/file");
    form.setAttribute("method", "get");
    form.setAttribute("target", "_blank");

    var hiddenEle1 = document.createElement("input");
    hiddenEle1.setAttribute("type", "hidden");
    hiddenEle1.setAttribute("name", "some");
    hiddenEle1.setAttribute("value", value);

    form.append(hiddenEle1 );

    form.submit();

}

используйте скрытый элемент, когда вам нужно отправить какой-либо элемент

<button ng-click="saveAsPDF()">Save As PDF</button>

Ответ 5

Решение от ужасов хорошо работало для меня. Однако файл также не сохранялся в Internet Explorer 10+. Следующий код работал у меня для браузера IE.

var file = new Blob(([data]), { type: 'application/pdf' });
if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(file, 'fileName.pdf');
}

Ответ 6

Другой пример с использованием Blob() Код:

function save(url, params, fileName){
    $http.get(url, {params: params}).success(function(exporter) {
        var blob = new Blob([exporter], {type: "text/plain;charset=utf-8;"});
        saveAs(blob, fileName);
    }).error(function(err) {
        console.log('err', err);
    });
};

// Save as Code
function saveAs(blob, fileName){
    var url = window.URL.createObjectURL(blob);

    var doc = document.createElement("a");
    doc.href = url;
    doc.download = fileName;
    doc.click();
    window.URL.revokeObjectURL(url);
}

Ответ 7

Вот как я решил эту проблему

$scope.downloadPDF = function () {
    var link = document.createElement("a");
    link.setAttribute("href",  "path_to_pdf_file/pdf_filename.pdf");
    link.setAttribute("download", "download_name.pdf");
    document.body.appendChild(link); // Required for FF
    link.click(); // This will download the data file named "download_name.pdf"
}

Ответ 8

string trackPathTemp = track.trackPath;

            //The File Path
            var videoFilePath = HttpContext.Current.Server.MapPath("~/" + trackPathTemp);

            var stream = new FileStream(videoFilePath, FileMode.Open, FileAccess.Read);
            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(stream)
            };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("video/mp4");
            result.Content.Headers.ContentRange = new ContentRangeHeaderValue(0, stream.Length);
            // result.Content.Headers.Add("filename", "Video.mp4");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = "Video.mp4"
            };
            return result;

Ответ 9

using FileSaver.js решила мою проблему благодаря помощи, ниже код помог мне

'$'

 DownloadClaimForm: function (claim) 
{
 url = baseAddress + "DownLoadFile";
 return  $http.post(baseAddress + "DownLoadFile", claim, {responseType: 'arraybuffer' })
                            .success(function (data) {
                                var file = new Blob([data], { type: 'application/pdf' });
                                saveAs(file, 'Claims.pdf');
                            });


    }

Ответ 10

Там написано Угловая служба Угловая файловый сервер использует FileSaver.js и Blob.js

 vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };