Eu tenho um requisito muito semelhante especificado aqui .
Eu preciso que o navegador do usuário inicie um download manualmente quando $('a#someID').click();
Mas não posso usar o window.href
método, pois 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 / guia. Como isso é possível?
javascript
jquery
download
Mithun Sreedharan
fonte
fonte
Respostas:
Use um invisível
<iframe>
:Para forçar o navegador a baixar um arquivo que seria capaz de renderizar (como HTML ou arquivos de texto), é necessário que o servidor defina o Tipo MIME do arquivo como um valor sem sentido, como
application/x-please-download-me
ou alternativamenteapplication/octet-stream
, usado para binários arbitrários dados.Se você deseja abri-lo apenas em uma nova guia, a única maneira de fazer isso é o usuário clicar em um link com o
target
atributo definido como_blank
.No jQuery:
Sempre que esse link é clicado, ele baixa o arquivo em uma nova guia / janela.
fonte
iframe.style.display = 'none';
pois isso ocultará completamente o iframe. Sua implementação atual tornará o iframe invisível, mas o iframe ainda ocupará espaço na parte inferior da página, causando espaço em branco extra.Content-Disposition: attachment; filename="downloaded.pdf"
(é claro que você pode personalizar o nome do arquivo conforme necessário).Atualização dos navegadores modernos de 2019
Esta é a abordagem que eu recomendaria agora com algumas ressalvas:
2012 abordagem original baseada em jQuery / iframe / cookie
Eu criei o plugin jQuery File Download ( Demo ) ( GitHub ), que também pode ajudar com sua situação. Funciona da mesma forma com um iframe, mas possui alguns recursos interessantes que eu achei bastante úteis:
Muito fácil de configurar com recursos visuais (jQuery UI Dialog, mas não obrigatório), tudo também é testado
O usuário nunca sai da mesma página em que iniciou o download do arquivo. Esse recurso está se tornando crucial para aplicativos da web modernos
As funções successCallback e failCallback permitem que você seja explícito sobre o que o usuário vê em qualquer situação
Em conjunto com a interface do usuário do jQuery, um desenvolvedor pode mostrar facilmente um modal informando ao usuário que um download de arquivo está ocorrendo, dissolver o modal após o início do download ou até mesmo informar o usuário de uma maneira amigável de que ocorreu um erro. Veja a demonstração para um exemplo disso. Espero que isso ajude alguém!
Aqui está uma demonstração simples de caso de uso usando a fonte do plugin com promessas. A página de demonstração inclui muitos outros exemplos de 'melhor UX'.
fonte
Verifique se o (s) seu (s) navegador (s) de destino executam o snippet acima sem problemas:
http://caniuse.com/#feat=download
fonte
document.body.appendChild(link)
antes e depois do cliquelink.remove()
para evitar poluir o DOM.link.download = ""
para manter o nome do arquivo original e evitar a necessidade de definir um.Estou surpreso que muitas pessoas não conheçam o atributo de download de alguns elementos. Por favor, ajude a espalhar a palavra sobre isso! Você pode ter um link html oculto e fingir um clique nele. Se o link html tiver o atributo de download, ele fará o download do arquivo, não o exibirá, não importa o quê. Aqui está o código. Ele fará o download de uma foto de gato, se puder encontrá-la.
Nota: Isso não é suportado em todos os navegadores: http://www.w3schools.com/tags/att_a_download.asp
fonte
mp4
sEu recomendo usar o
download
atributo para download em vez do jQuery:Isso fará o download do seu arquivo, sem abri-lo.
fonte
Se você já estiver usando o jQuery, poderá se aventurar para produzir um trecho menor.
Uma versão do jQuery da resposta de Andrew:
fonte
if
declaração realmente deve ser:if( $idown && $idown.length > 0 )
Funciona no Chrome, Firefox e IE8 e superior.
fonte
url
, não fazer o download.Exemplo simples usando um
iframe
Em seguida, basta chamar a função onde quiser:
downloadURL('path/to/my/file');
fonte
Isso pode ser útil se você não precisar navegar em outra página. Esta é a função javascript básica, portanto pode ser usada em qualquer plataforma em que o back-end esteja em Javascript.
fonte
Apenas sete anos depois, aqui vem uma solução jQuery de uma linha usando um formulário em vez de um iframe ou link:
Eu testei isso em
Se alguém souber de alguma desvantagem com esta solução, ficarei muito feliz em saber sobre eles.
Demonstração completa:
fonte
filePath
tiver uma sequência de consultas, pois o envio de um formulário substituirá a sequência de caracteres no atributo action.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Este é Acessando equivalente:filepath?myQsKey=myValue
window.location
defilePath
. Apenaswindow.location = filePath;
faria o mesmo.download
atributo dessa maneira para informar ao navegador que deseja um download, independentemente dos cabeçalhos que o servidor retorna, o que você pode fazer com uma
elemento.)Não sei se a pergunta é muito antiga, mas a configuração de window.location para um URL de download funcionará, desde que o tipo mime de download esteja correto (por exemplo, um arquivo zip).
fonte
Acabei usando o trecho abaixo e funciona na maioria dos navegadores, mas não testado no IE.
Atualizar
fonte
MouseEvent
aqui em vez de sempre usarclick
? E por que anexar o link ao documento antes de clicar nele? Talvez isso tenha vantagens sobre a abordagem mais simples mostrada em stackoverflow.com/a/23013574/1709587 , mas, nesse caso, elas não são explicadas aqui.Para melhorar a resposta do Imagine Breaker, isso é suportado no FF & IE:
Em outras palavras, basta usar uma
dispatchEvent
função em vez declick()
;fonte
Talvez apenas o seu javascript abra uma página que apenas baixa um arquivo, como quando você arrasta um link de download para uma nova guia:
Com a janela aberta, abra uma página de download que fecha automaticamente.
fonte
O código mais completo e funcional (testado) para fazer o download de dados para o FireFox, o Chrome e o IE Code está a seguir. Suponha que os dados estão em texarea campo, que tem id = 'textarea_area' e filename é o nome do arquivo onde os dados serão transferidos.
e depois é só ligar
Para iniciar o download.
A matriz para definir o tipo MIME correto para a caixa de diálogo de download PODE SER o seguinte:
fonte
para mim isso está funcionando ok testado no chrome v72
fonte
Eu tive bons resultados com o uso de uma tag FORM, pois ela funciona em qualquer lugar e você não precisa criar arquivos temporariamente no servidor. O método funciona assim.
No lado do cliente (página HTML), você cria um formulário invisível como este
Então você adiciona este código Javascript ao seu botão:
No lado do servidor, você tem o seguinte código PHP em
download.php
:Você pode até criar arquivos zip dos seus dados assim:
A melhor parte é que não deixa nenhum arquivo residual no seu servidor, pois tudo é criado e destruído em tempo real!
fonte
A resposta enviada por hitesh em 30 de dezembro de 13 funciona de fato. Requer apenas um pequeno ajuste:
O arquivo PHP pode se chamar. Em outras palavras, basta criar um arquivo chamado saveAs.php e colocar esse código nele ...
fonte
Essas funções são usadas no stacktrace.js :
fonte
Eu sugiro que você use o evento mousedown, chamado ANTES do evento click. Dessa forma, o navegador manipula o evento click naturalmente, o que evita qualquer estranheza no código:
fonte
Excelente solução da Corbacho, acabei de me adaptar para me livrar da var
fonte
Firefox e Chrome testados:
Esta é realmente a solução "chrome" para o firefox (não a testei em outros navegadores, por favor, deixe comentários sobre a compilabilidade)
fonte
Há muitas pequenas coisas que podem acontecer ao tentar baixar um arquivo. A inconsistência entre navegadores é um pesadelo. Acabei usando esta ótima pequena biblioteca. https://github.com/rndme/download
O interessante é que ele é flexível não apenas para os URLs, mas também para os dados do lado do cliente que você deseja baixar.
fonte
Usando tag de âncora e PHP, isso pode ser feito, verifique esta resposta
Chamada do JQuery Ajax para download de arquivo PDF
Estou verificando o tamanho do arquivo, porque se você carregar pdf do CDN cloudfront, não obterá o tamanho do documento que força o download do documento em 0kb. Para evitar isso, estou verificando esta condição
fonte
Sei que estou atrasado para a festa, mas gostaria de compartilhar minha solução, que é a variação da solução Imagine Breaker acima. Tentei usar a solução dele, porque a solução dele parece mais simples e fácil para mim. Mas, como já foi dito, não funcionou em alguns navegadores, então fiz algumas variações usando o jquery.
Espero que isso possa ajudar alguém lá fora.
fonte
window.location.href = url
. O link que você cria não é usado para nada.Nota: Não suportado em todos os navegadores.
Eu estava procurando uma maneira de baixar um arquivo usando o jquery sem precisar definir o URL do arquivo no atributo href desde o início.
fonte
Eu uso a solução da @ rakaloof sem JQuery (porque você não precisa dela aqui ). Obrigado pela idéia! Aqui está uma solução baseada em formulário vanillaJS:
fonte