Mas limitado pelos navegadores, em muitos casos só podemos fornecer um link e permitir que os usuários cliquem para abrir -> Salvar como. Como o seguinte link:
Copie o código do código da seguinte forma:
<a href="file.js">arquivo.js</a>
Quando o usuário clicar neste link, o navegador abrirá e exibirá o conteúdo do arquivo apontado pelo link. Obviamente, isso não atende às nossas necessidades. HTML5 adiciona um atributo de download à tag a. Enquanto esse atributo estiver presente, quando o link for clicado, o navegador não abrirá o arquivo apontado pelo link, mas fará o download dele (atualmente compatível apenas com Chrome, Firefox e Firefox). Ópera).
Ao baixar, o nome do link será usado diretamente como nome do arquivo, mas pode ser alterado, basta adicionar o nome do arquivo desejado para download, como: download="not-a-file.js".
Mas isso não é suficiente. O método acima só é adequado para uso quando o arquivo está no servidor. E se você quiser que o navegador baixe o conteúdo gerado por js no lado do navegador?
Na verdade, ainda existe uma maneira de fazer isso, acredito que muitas pessoas já ouviram falar da palavra DataURI. A mais comum é o src da imagem, como:
Copie o código do código da seguinte forma:
<img src="data:image/gif;base64,R0lGOXXXXX">
A explicação do DataURI pode ser movida aqui, não vou explicar aqui.
Então, agora existe uma lei a seguir ao baixar conteúdo gerado por js. Encapsulado em um método como segue:
Copie o código do código da seguinte forma:
function downloadFile(aLink, nomeArquivo, conteúdo){
aLink.download = nomedoarquivo;
aLink.href = "dados:texto/simples," + conteúdo;
}
Após chamar downloadFile, o usuário clica no link para acionar o download do navegador.
No entanto, não é suficiente. O método acima tem duas deficiências, que levarão à perda de muitas meninas preguiçosas:
Existem restrições quanto aos tipos de arquivos que podem ser baixados. O que devo fazer se quiser baixar as fotos processadas?
Você tem que clicar novamente para fazer o download, o que é muito problemático.
Para resolver o problema do tipo de arquivo, você pode usar a nova API do navegador (URL.createObjectURL) para resolver o problema. URL.createObjectURL geralmente é usado para criar o DataURI da imagem para exibir a imagem. e deixe o navegador nos ajudar a definir o tipo de arquivo.
O parâmetro de URL.createObjectURL é um objeto File ou um objeto Blob. O objeto File é o arquivo selecionado por meio de input[type=file]. O objeto Blob é um objeto binário grande.
Agora, só precisamos criar um ObjectURL com conteúdo e atribuí-lo a umLink para resolver o problema de limitação de tipo de arquivo.
O download automático de arquivos também é bastante fácil. Você mesmo pode criar um evento de clique na interface do usuário e acioná-lo automaticamente para obter o download automático.
Agora vamos dar uma olhada no código final:
Copie o código do código da seguinte forma:
function downloadArquivo(nomedoarquivo,conteúdo){
var aLink = document.createElement('a');
var blob = new Blob([conteúdo]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false); //initEvent sem os dois últimos parâmetros reportará um erro no FF. Obrigado a Barret Lee pelo feedback.
aLink.download = nomedoarquivo;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Agora, assim que downloadFile for chamado, o arquivo será baixado automaticamente. Não é ótimo ^_^.
Nota: Atualmente (2014-01) Blob e URL.createObjectURL não precisam mais adicionar prefixos privados em navegadores padrão, então você pode usá-los com confiança ~~ Se estiver preocupado, você pode verificar Posso usar.