Загрузить файл с API с помощью javascript

Question

Мне нужно принудительно загрузить файл с помощью JavaScript. Я использую Angular и restangular для связи с API. Я сейчас работаю над загрузкой файла действиями от API ... API возвращает мне исходные байты этого файла и эти заголовки:

Content-Disposition:attachment; filename="thefile" 
Content-Length:2753 

Так у меня есть сырые байты, но я не знаю, как справиться с этим, чтобы загрузить это файл для клиента ... Можете ли вы дать мне некоторое решение этой проблемы? Как я могу обрабатывать ответ возврата от сервера для открытия в диалоговом окне «Сохранить как» браузера клиента?

Редакция: сервер не посылает мне тип содержимого файла ... Также в заголовках вызова должен быть аутентификациями маркера, так что я не могу использовать прямое открытое окно с URL .. Кодекса:

vm.downloadFile = function(fileId){ 
var action = baseHelpers.one('files/' + fileId + '/content').get(); 
action.then(function(result){}); 
} 

Answer 1

Трудно ответить, не видя код, вызывающий API, но в целом, как вы это делаете, нужно отправить форму вместо использования ajax. Как правило, вы бы иметь скрытый IFRAME с name="downloadframe" или подобным, а затем использовать форму, как это:

<form id="downloadform" target="downloadframe" method="POST" action="/the/api/endpoint"> 
<input type="hidden" name="apiParameter" value="parameter-value"> 
</form> 

Тогда вы заполните поля формы и представить его программно. Вот пример не используя Угловая, но адаптируя это было бы просто (хотя и не обязательно):

var form = document.getElementById("downloadform"); 
form.apiParameter.value = "appropriate value"; 
form.submit(); 

Когда браузер получает ответ, он видит заголовок Content-Disposition и спрашивает пользователя, куда сохранить файл.

Вы даже можете создать форму динамически, а не использовать разметку, если хотите.

Answer 2

Мое первое предположение: просто запросите URL-адрес API напрямую, а не асинхронный запрос. Вы должны быть в состоянии сделать что-то подобное в вашем коде

$window.location = "http://example.org/api/download" 

Для решения с использованием RESTangular я нашел this snipped, может быть, вы можете попробовать:

Restangular.one('attachments', idAtt).withHttpConfig({responseType: 'blob'}}.get({}, {"X-Auth-Token": 'token'}).then(function(response) { 
    var url = (window.URL || window.webkitURL).createObjectURL(response); 
    window.open(url); 
});