Você pode fazer isso em JavaScript nativo. Você precisará analisar seus dados no formato CSV correto da seguinte maneira (supondo que você esteja usando uma matriz de matrizes para os dados, conforme descrito na pergunta):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
ou a maneira mais curta (usando as funções das setas ):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
Depois, você pode usar JavaScript window.open
e encodeURI
funções para baixar o arquivo CSV da seguinte maneira:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Editar:
Se você quiser atribuir um nome específico ao arquivo, faça as coisas de maneira um pouco diferente, pois não há suporte para acessar um URI de dados usando o
window.open
método Para conseguir isso, você pode criar um
<a>
nó DOM oculto e definir seu
download
atributo da seguinte maneira:
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
window.open
. No entanto, você pode criar um link oculto que tenha umdownload
atributo definido para o nome do arquivo desejado. Em seguida, "clicar" neste link fará o download do arquivo com o nome que você deseja, acrescentarei à minha resposta.document.body.appendChild(link);
para obter suporte completo no FF.data = [["Hello, world"]]
. Isso produzirá duas colunas quando deve gerar uma.encodeURIComponent()
função ou algo assim? Estou usando o Chrome como navegador.Com base nas respostas acima, criei esta função que testei no IE 11, Chrome 36 e Firefox 29
Por exemplo: https://jsfiddle.net/jossef/m3rrLzk0/
fonte
window.open
umelse
delink.download !== undefined
.link.style.visibility='hidden'
. B / c o atributo DOM é somente leitura. Mais detalhes podem ser encontrados em updates.html5rocks.com/2015/04/… na seção "A gravação em propriedades somente leitura no modo estrito gera um erro"Esta solução deve funcionar com o Internet Explorer 10+, Edge, versões antigas e novas do Chrome, FireFox, Safari, ++
A resposta aceita não funcionará com o IE e o Safari.
A execução do snippet de código fará o download dos dados simulados como csv
Créditos para dandavis https://stackoverflow.com/a/16377813/1350598
fonte
setTimeout
.iframe
secção pode ser substituído por apenas location.href = ...URL.createObjectURL
(termina comURL
nãoUrl
).Vim para cá procurando um pouco mais de conformidade com a RFC 4180 e não consegui encontrar uma implementação, por isso fiz uma (possivelmente ineficiente) para minhas próprias necessidades. Eu pensei em compartilhar com todos.
Espero que isso ajude alguém no futuro. Isso combina a codificação do CSV e a capacidade de baixar o arquivo. No meu exemplo no jsfiddle . Você pode fazer o download do arquivo (assumindo o navegador HTML 5) ou visualizar a saída no console.
ATUALIZAR:
Agora, o Chrome parece ter perdido a capacidade de nomear o arquivo. Não sei ao certo o que aconteceu ou como corrigi-lo, mas sempre que uso esse código (incluindo o jsfiddle), o arquivo baixado agora é nomeado
download.csv
.fonte
A solução do @Default funciona perfeitamente no Chrome (muito obrigado por isso!), Mas tive um problema com o IE.
Aqui está uma solução (funciona no IE10):
fonte
Na atualização do Chrome 35, o comportamento do atributo de download foi alterado.
https://code.google.com/p/chromium/issues/detail?id=373182
para trabalhar isso no chrome, use este
fonte
Trabalhando para todos os idiomas
fonte
Ai está :
fonte
O pessoal está tentando criar sua própria string csv, que falha em casos extremos, por exemplo, caracteres especiais e outros, certamente esse é um problema resolvido, certo?
papaparse - use para codificação JSON para CSV.
Papa.unparse()
.Exemplo de uso
https://github.com/mholt/PapaParse/issues/175 - Veja este comentário para obter uma discussão sobre o suporte ao navegador.
fonte
Você pode usar o trecho de código abaixo para exportar a matriz para o arquivo CSV usando Javascript.
Também lida com parte de caracteres especiais
Aqui está o link para trabalhar com o jsfiddle
fonte
fonte
Crie um blob com os dados csv .ie
var blob = new Blob([data], type:"text/csv");
Se o navegador suportar o salvamento de blobs, ou seja,
if window.navigator.mSaveOrOpenBlob)===true
, salve os dados csv usando:window.navigator.msSaveBlob(blob, 'filename.csv')
Se o navegador não suportar salvar e abrir blobs, salve os dados csv como:
Snippet de código completo:
fonte
Há duas perguntas aqui:
Todas as respostas para a primeira pergunta (exceto a da Milimetric) aqui parecem um exagero. E o do Milimetric não cobre requisitos alternativos, como cercar cadeias com aspas ou converter matrizes de objetos.
Aqui estão minhas opiniões sobre isso:
Para um csv simples, basta um mapa () e uma junção ():
Esse método também permite especificar um separador de colunas que não seja vírgula na junção interna. por exemplo, uma guia:
d.join('\t')
Por outro lado, se você quiser fazê-lo corretamente e incluir cadeias entre aspas "", poderá usar alguma mágica JSON:
se você tiver uma matriz de objetos como:
fonte
.replace
deve especificar colchetes versus colchetes..replace
é feito em uma cadeia devolvida porvalues()
que leva um objeto e retorna uma matriz de valoresvalues()
método não foi encontrado quando tentei seu código.values()
explicitamenteObject
. Eu corrigi o exemplo.Muitas soluções de rolagem aqui para converter dados em CSV, mas praticamente todas elas terão várias advertências em termos do tipo de dados que serão formatadas corretamente, sem fazer tropeçar no Excel ou nos gostos.
Por que não usar algo comprovado: Papa Parse
Em seguida, basta combinar isso com uma das soluções de download locais aqui, por exemplo. o de @ArneHB parece bom.
fonte
Função de uma seta no ES6:
Então :
Caso alguém precise disso para reactjs,
react-csv
existe para issofonte
react-csv
biblioteca funciona como um encanto. Ótima solução para quem usa módulos.Veja como faço o download de arquivos CSV no lado do cliente no meu aplicativo Java GWT. Agradecimentos especiais a Xavier John por sua solução. Foi verificado que funciona no FF 24.6.0, IE 11.0.20 e Chrome 45.0.2454.99 (64 bits). Espero que isso economize um pouco de tempo para alguém:
fonte
A seguir, é uma solução js nativa.
fonte
Aqui está uma versão amigável do Angular:
fonte
As respostas acima funcionam, mas lembre-se de que, se você estiver abrindo no formato .xls, as colunas ~~ poderão ser separadas por, em
'\t'
vez de','
, a resposta https://stackoverflow.com/a/14966131/6169225 funcionou bem para mim, desde que eu usei.join('\t')
as matrizes em vez de.join(',')
.fonte
Eu uso essa função para converter um
string[][]
arquivo CSV. Ele cita uma célula, se contiver um"
, um,
ou outro espaço em branco (exceto espaços em branco):Nota : não funciona no Internet Explorer <11, a menos que
map
seja preenchido com polyfilled.Nota : Se as células contiverem números, você poderá adicionar
cell=''+cell
antesif (cell.replace...
para converter números em seqüências de caracteres.Ou você pode escrevê-lo em uma linha usando o ES6:
fonte
Eu recomendaria o uso de uma biblioteca como o PapaParse: https://github.com/mholt/PapaParse
A resposta aceita atualmente tem vários problemas, incluindo:
fonte
Simplesmente tente isso, algumas das respostas aqui não estão tratando dados unicode e dados que possuem vírgula, por exemplo, data.
fonte
Baixar arquivo CSV
fonte
Caso alguém precise disso para o knockout js, ele funciona bem com basicamente a solução proposta:
html:
ver modelo:
fonte
Eu adicionei à função Xavier Johns para incluir também os cabeçalhos de campo, se necessário, mas usa o jQuery. O bit $ .each precisará ser alterado para um loop javascript nativo
fonte
Esta é uma resposta modificada com base na resposta aceita em que os dados seriam provenientes do JSON.
fonte
Se você está procurando uma solução realmente rápida, também pode dar uma chance a esta pequena biblioteca que criará e fará o download do arquivo CSV para você: https://github.com/mbrn/filefy
O uso é muito simples:
fonte