Baixar arquivo usando Javascript/jQuery
Tenho um requisito muito semelhante especificado aqui.
Eu preciso que o usuário's browser inicie um download manualmente quando $('a#someID').click();
Mas eu não posso utilizar o método window.href
, já que ele substitui o conteúdo da página atual pelo arquivo que você'está tentando baixar.
Em vez disso, quero abrir o download em uma nova janela/tab. Como isso é possível?
322
3
Utilize um
< invisível;iframe>
:Para forçar o navegador a baixar um arquivo que ele seria capaz de renderizar (como arquivos HTML ou texto), você precisa que o servidor defina o arquivo's MIME Type para um valor sem sentido, como
application/x-please-download-me
ou, alternativamente,application/octet-stream
, que é utilizado para dados binários arbitrários.Se você quiser abri-lo apenas em uma nova aba, a única maneira de fazer isso é o usuário clicar em um link com o atributo
target
definido como_blank
.In jQuery:
Sempre que esse link for clicado, ele irá baixar o arquivo em uma nova aba/janela.
**2019 actualização dos browsers modernos***
Esta é a abordagem I'd agora recomendo com algumas advertências:
**2012 original jQuery/iframe/cookie abordagem baseada em jQuery/iframe/cookie***
Eu criei o plugin jQuery File Download (Demo) (GitHub) que também pode ajudar na sua situação. Ele funciona muito similar com um iframe, mas tem algumas características legais que eu achei bastante úteis:
Muito fácil de configurar com bons visuais (jQuery UI Dialog, mas não é necessário), tudo é testado também
O usuário nunca sai da mesma página de onde iniciou o download de um arquivo. Esta característica está a tornar-se crucial para as aplicações web modernas
funções successCallback e failCallback permitem que você seja explícito sobre o que o usuário vê em qualquer uma das situações
Em conjunto com o jQuery UI um desenvolvedor pode facilmente mostrar um modal dizendo ao usuário que um download de arquivo está ocorrendo, desmarcar o modal após o início do download ou mesmo informar ao usuário de uma maneira amigável que um erro ocorreu. Veja a Demo para um exemplo disto. Espero que isto ajude alguém!
Aqui está uma demonstração de caso de uso simples usando o plugin fonte com promessas. A página demo inclui muitos outros, 'melhor UX' exemplos também.
Se você já está usando jQuery, você poderia aproveitar para produzir um pequeno snippet Uma versão jQuery da resposta de Andrew's: