Existe alguma maneira de criar um arquivo de texto no lado do cliente e solicitar ao usuário que faça o download, sem nenhuma interação com o servidor? Sei que não posso gravar diretamente na máquina (segurança e tudo), mas posso criar e solicitar que eles a salvem?
javascript
file
web-applications
client-side
Joseph Silber
fonte
fonte
Respostas:
Você pode usar URIs de dados. O suporte ao navegador varia; veja Wikipedia . Exemplo:
O octet-stream é forçar um prompt de download. Caso contrário, provavelmente será aberto no navegador.
Para CSV, você pode usar:
Experimente a demonstração do jsFiddle .
fonte
Solução simples para navegadores prontos para HTML5 ...
Uso
fonte
download
atributo você pode especificar o nome do arquivo ;-)txt
extensão se você não fornecer uma extensão no nome do arquivo. Se você fizerdownload("data.json", data)
, funcionará como esperado.Todas as soluções acima não funcionaram em todos os navegadores. Aqui está o que finalmente funciona no IE 10+, Firefox e Chrome (e sem o jQuery ou qualquer outra biblioteca):
Observe que, dependendo da sua situação, convém chamar URL.revokeObjectURL após a remoção
elem
. De acordo com os documentos para URL.createObjectURL :fonte
Failed: network error
Chrome. Este funciona bem.Todo o exemplo acima funciona bem no Chrome e no IE, mas falha no Firefox. Por favor, considere anexar uma âncora ao corpo e removê-la após clicar.
fonte
a.click()
linha porque acha que o URL do blob é de origem cruzada.Estou feliz usando o FileSaver.js . Sua compatibilidade é muito boa (IE10 + e tudo mais) e é muito simples de usar:
fonte
<a>
.O método a seguir funciona no IE11 +, Firefox 25+ e Chrome 30+:
Veja isso em ação: http://jsfiddle.net/Kg7eA/
O Firefox e o Chrome oferecem suporte ao URI de dados para navegação, o que nos permite criar arquivos navegando para um URI de dados, enquanto o IE não o suporta por motivos de segurança.
Por outro lado, o IE possui API para salvar um blob, que pode ser usado para criar e baixar arquivos.
fonte
Essa solução é extraída diretamente do repositório github do tiddlywiki (tiddlywiki.com). Eu usei o tiddlywiki em quase todos os navegadores e funciona como um encanto:
Repo Github: Download do módulo de proteção
fonte
Solução que funciona no IE10: (eu precisava de um arquivo csv, mas basta alterar o tipo e o nome do arquivo para txt)
fonte
Se você quiser apenas converter uma string para estar disponível para download, tente isso usando o jQuery.
fonte
O pacote js-file-download em github.com/kennethjiang/js-file-download lida com casos extremos para suporte ao navegador:
Ver fonte - para ver como ele usa as técnicas mencionadas nesta página.
Instalação
Uso
fonte
Como mencionado anteriormente, o filesaver é um ótimo pacote para trabalhar com arquivos no lado do cliente. Mas, não é bem feito com arquivos grandes. StreamSaver.js é uma solução alternativa (apontada em FileServer.js) que pode manipular arquivos grandes:
fonte
fonte
Em abril de 2014, as APIs FileSytem não podem ser padronizadas no W3C. Qualquer um que olhe a solução com blob deve enfiar com cuidado, eu acho.
O HTML5 é um alerta
Lista de discussão W3C na API FileSytem
fonte
Com base na resposta @Rick, que foi realmente útil.
Você precisa escapar da string
data
se quiser compartilhá-la desta maneira:`Desculpe, não posso comentar a resposta de @ Rick devido à minha baixa reputação atual no StackOverflow.
Uma sugestão de edição foi compartilhada e rejeitada.
fonte
Podemos usar a URL api, em particular URL.createObjectURL () , eo Blob API para codificar e baixar praticamente qualquer coisa.
Se o seu download for pequeno, isso funcionará bem:
Se o seu download for grande, em vez de usar o DOM, a melhor maneira é criar um elemento de link com os parâmetros de download e acionar um clique.
Observe que o elemento link não está anexado ao documento, mas o clique funciona mesmo assim! É possível criar um download de muitas centenas de Mo dessa maneira.
Bônus!Faça o download de qualquer objeto cíclico , evite os erros:
Usando https://github.com/douglascrockford/JSON-js/blob/master/cycle.js
Neste exemplo, baixando o
document
objeto como json.fonte
Você pode até fazer um melhor do que apenas os URIs - usando o Chrome, você também pode sugerir o nome do arquivo, conforme explicado nesta postagem do blog sobre como nomear um download ao usar URIs .
fonte
Esta função abaixo funcionou.
fonte
O método a seguir funciona no IE10 +, Edge, Opera, FF e Chrome:
Então, basta chamar a função:
fonte
Para mim, isso funcionou perfeitamente, com o mesmo nome de arquivo e extensão sendo baixados
<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>
'title' é o nome do arquivo com extensão, ou seja
sample.pdf
,waterfall.jpg
, etc ..'file64' é o conteúdo base64, algo como isto, ou seja,
Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO
fonte
Eu usaria uma
<a></a>
tag e depois definiriahref='path'
. Posteriormente, coloque uma imagem entre os<a>
elementos para que eu possa ter um visual para vê-la. Se você quiser, poderá criar uma função que alterará ohref
para que ela não seja apenas o mesmo link, mas seja dinâmica.Dê
<a>
uma tagid
também se você quiser acessá-la com javascript.Começando com a versão HTML:
Agora com JavaScript:
fonte
Se o arquivo contiver dados de texto, uma técnica que eu uso é colocar o texto em um elemento da área de texto e fazer com que o usuário o selecione (clique em área de texto e, em seguida, ctrl-A) e copie seguido de uma colagem em um editor de texto.
fonte