No meu projeto Angular JS, tenho uma <a>
marca de âncora, que quando clicada faz uma GET
solicitação HTTP para um método WebAPI que retorna um arquivo.
Agora, desejo que o arquivo seja baixado para o usuário assim que a solicitação for bem-sucedida. Como faço isso?
A tag de âncora:
<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) {
// ...
});
}
Meu método WebAPI:
[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;
}
c#
javascript
html
angularjs
asp.net-web-api
whereDragonsDwell
fonte
fonte
Respostas:
O suporte para o download de arquivos binários no uso do ajax não é ótimo, ainda está em desenvolvimento como rascunhos de trabalho .
Método simples de download:
Você pode fazer com que o navegador baixe o arquivo solicitado simplesmente usando o código abaixo, e isso é suportado em todos os navegadores e, obviamente, acionará a solicitação WebApi da mesma forma.
Método de download binário do Ajax:
O uso do ajax para baixar o arquivo binário pode ser feito em alguns navegadores, e abaixo está uma implementação que funcionará nos mais recentes sabores do Chrome, Internet Explorer, FireFox e Safari.
Ele usa um
arraybuffer
tipo de resposta, que é convertido em JavaScriptblob
, que é apresentado para salvar usando osaveBlob
método - embora este esteja presente apenas no Internet Explorer - ou transformado em uma URL de dados de blob que é aberta pelo navegador, acionando a caixa de diálogo de download se o tipo MIME for suportado para exibição no navegador.Suporte ao Internet Explorer 11 (fixo)
Nota: O Internet Explorer 11 não gostou de usar a
msSaveBlob
função se ela tivesse um alias - talvez um recurso de segurança, mas provavelmente uma falha. Portanto, o usovar saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc.
para determinar osaveBlob
suporte disponível causou uma exceção; por isso, o código abaixo agora é testadonavigator.msSaveBlob
separadamente. Obrigado? MicrosoftUso:
Notas:
Você deve modificar seu método WebApi para retornar os seguintes cabeçalhos:
Eu usei o
x-filename
cabeçalho para enviar o nome do arquivo. Este é um cabeçalho personalizado por conveniência, mas você pode extrair o nome do arquivo docontent-disposition
cabeçalho usando expressões regulares.Você também deve definir o
content-type
cabeçalho MIME para sua resposta, para que o navegador conheça o formato dos dados.Eu espero que isso ajude.
fonte
window.open
.Download em PDF do C # WebApi, todos trabalhando com autenticação Angular JS
Controlador da API da Web
Serviço JS angular
Qualquer um fará
Controlador JS angular que chama o serviço
E por último a página HTML
Isso será refatorado apenas compartilhando o código, agora espero que ajude alguém, pois demorei um pouco para que isso funcionasse.
fonte
Para mim, a API da Web era Rails e Angular do lado do cliente usado com Restangular e FileSaver.js
API da Web
HTML
Controlador angular
Serviço Angular
fonte
Também tivemos que desenvolver uma solução que funcionasse mesmo com APIs que exigem autenticação (consulte este artigo )
Usando AngularJS em poucas palavras, aqui está como fizemos:
Etapa 1: criar uma diretiva dedicada
Etapa 2: criar um modelo
Etapa 3: use-o
Isso renderizará um botão azul. Quando clicado, um PDF será baixado (Cuidado: o back-end deve entregar o PDF na codificação Base64!) E colocado no href. O botão fica verde e muda o texto para Salvar . O usuário pode clicar novamente e será apresentada uma caixa de diálogo de arquivo de download padrão para o arquivo my-awesome.pdf .
fonte
Envie seu arquivo como uma string base64.
Se o método attr não funcionar no Firefox Você também pode usar o método javaScript setAttribute
fonte
Você pode implementar uma função showfile que recebe parâmetros dos dados retornados do WEBApi e um nome de arquivo para o arquivo que você está tentando baixar. O que fiz foi criar um serviço de navegador separado para identificar o navegador do usuário e, em seguida, manipular a renderização do arquivo com base no navegador. Por exemplo, se o navegador de destino é chrome em um ipad, é necessário usar o objeto FileReader javascripts.
fonte
Passei por uma série de soluções e foi isso que achei que funcionou muito bem para mim.
No meu caso, eu precisava enviar uma solicitação de postagem com algumas credenciais. Uma pequena sobrecarga foi adicionar jquery dentro do script. Mas valeu a pena.
fonte
No seu componente, ou seja, código js angular:
fonte