Поддержка загрузки двоичных файлов при использовании ajax невелика, она все еще находится в разработке как рабочие черновики .

Простой способ загрузки:

Вы можете загрузить браузер для загрузки запрошенного файла, просто используя приведенный ниже код, и это поддерживается во всех браузерах и, очевидно, вызовет запрос WebApi тот же.

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

Метод загрузки бинарных файлов Ajax:

Использование ajax для загрузки двоичного файла может быть выполнено в некоторых браузерах, а ниже - реализация, которая будет работать в самых последних вариантах Chrome, Internet Explorer, FireFox и Safari.

Он использует тип ответа arraybuffer, который затем преобразуется в JavaScript blob, который затем либо предоставляется для сохранения с использованием метода saveBlob - хотя это только сейчас присутствует в Internet Explorer или превращается в URL-адрес данных blob, который открывается браузером, запуская диалог загрузки, если тип mime поддерживается для просмотра в браузере.

Internet Explorer 11 Поддержка (исправлена)

Примечание. Internet Explorer 11 не любил использовать функцию msSaveBlob, если она была псевдонимом - возможно, secu но, скорее, недостаток, поэтому использование var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc. для определения доступной поддержки saveBlob вызвало исключение; поэтому теперь код ниже проверяется отдельно для navigator.msSaveBlob. Благодаря? 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;
    });
};

Использование:

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

Примечания:

Вы должны изменить свой метод WebApi, чтобы вернуть следующие заголовки:

• Я использовал заголовок x-filename для отправки имени файла. Это удобный пользовательский заголовок для удобства, однако вы можете извлечь имя файла из заголовка content-disposition с помощью регулярных выражений.
• Вы должны установить заголовок mf content-type для вашего ответа, так что браузер знает формат данных.

Надеюсь, это поможет.