Vous pouvez le faire en JavaScript natif. Vous devrez analyser vos données au bon format CSV (en supposant que vous utilisez un tableau de tableaux pour vos données comme vous l'avez décrit dans la question):
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 la manière plus courte (en utilisant les fonctions fléchées ):
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");
Ensuite, vous pouvez utiliser JavaScript window.open
et les encodeURI
fonctions pour télécharger le fichier CSV comme suit:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Éditer:
Si vous voulez donner un nom spécifique à votre fichier, vous devez faire les choses un peu différemment car cela n'est pas pris en charge pour accéder à un URI de données à l'aide de la
window.open
méthode. Pour ce faire, vous pouvez créer un
<a>
nœud DOM masqué et définir son
download
attribut comme suit:
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
. Cependant, vous pouvez créer un lien masqué dont l'download
attribut est défini sur le nom de fichier souhaité. Ensuite, en cliquant sur ce lien, le fichier sera téléchargé au nom que vous désirez, je l'ajouterai à ma réponse.document.body.appendChild(link);
pour obtenir un support complet dans FF.data = [["Hello, world"]]
. Cela produira deux colonnes alors qu'il devrait en produire une.encodeURIComponent()
fonction ou quelque chose? J'utilise Chrome comme navigateur.Sur la base des réponses ci-dessus, j'ai créé cette fonction que j'ai testée sur IE 11, Chrome 36 et Firefox 29
Par exemple: https://jsfiddle.net/jossef/m3rrLzk0/
la source
window.open
dans unelse
delink.download !== undefined
.link.style.visibility='hidden'
. B / c l'attribut DOM est en lecture seule. Plus de détails peuvent être trouvés dans updates.html5rocks.com/2015/04/… dans la section "L'écriture dans des propriétés en lecture seule en mode strict provoquera une erreur"Cette solution devrait fonctionner avec Internet Explorer 10+, Edge, les anciennes et nouvelles versions de Chrome, FireFox, Safari, ++
La réponse acceptée ne fonctionnera pas avec IE et Safari.
L'exécution de l'extrait de code téléchargera les données fictives au format csv
Crédits à dandavis https://stackoverflow.com/a/16377813/1350598
la source
setTimeout
.iframe
section peut être remplacée par simplement location.href = ...URL.createObjectURL
(se termine parURL
pasUrl
).Je suis venu ici à la recherche d'un peu plus de conformité à la RFC 4180 et je n'ai pas trouvé d'implémentation, alors j'en ai fait une (peut-être inefficace) pour mes propres besoins. Je pensais que je le partagerais avec tout le monde.
J'espère que cela aidera quelqu'un à l'avenir. Cela combine à la fois l'encodage du CSV et la possibilité de télécharger le fichier. Dans mon exemple sur jsfiddle . Vous pouvez télécharger le fichier (en supposant que le navigateur HTML 5) ou afficher la sortie dans la console.
MISE À JOUR:
Chrome semble maintenant avoir perdu la capacité de nommer le fichier. Je ne sais pas ce qui s'est passé ou comment le corriger, mais chaque fois que j'utilise ce code (y compris le jsfiddle), le fichier téléchargé est maintenant nommé
download.csv
.la source
La solution de @Default fonctionne parfaitement sur Chrome (merci beaucoup pour ça!) Mais j'ai eu un problème avec IE.
Voici une solution (fonctionne sur IE10):
la source
Dans la mise à jour de Chrome 35, le comportement des attributs de téléchargement a été modifié.
https://code.google.com/p/chromium/issues/detail?id=373182
pour travailler cela en chrome, utilisez ceci
la source
Travailler pour toutes les langues
la source
Voilà :
la source
Les gens essaient de créer leur propre chaîne csv, qui échoue aux cas marginaux, par exemple les caractères spéciaux et autres, c'est sûrement un problème résolu, n'est-ce pas?
papaparse - à utiliser pour l'encodage JSON en CSV.
Papa.unparse()
.Exemple d'utilisation
https://github.com/mholt/PapaParse/issues/175 - Voir ce commentaire pour une discussion sur la prise en charge du navigateur.
la source
Vous pouvez utiliser le morceau de code ci-dessous pour exporter le tableau vers un fichier CSV en utilisant Javascript.
Cela gère également la partie des caractères spéciaux
Voici le lien pour travailler avec jsfiddle
la source
la source
Créer un blob avec les données csv .ie
var blob = new Blob([data], type:"text/csv");
Si le navigateur prend en charge l'enregistrement des objets blob, c.
if window.navigator.mSaveOrOpenBlob)===true
-à- d. , Enregistrez les données csv en utilisant:window.navigator.msSaveBlob(blob, 'filename.csv')
Si le navigateur ne prend pas en charge l'enregistrement et l'ouverture des objets blob, enregistrez les données csv sous:
Extrait de code complet:
la source
Il y a deux questions ici:
Toutes les réponses à la première question (à l'exception de celle de Milimetric) semblent ici exagérées. Et celui de Milimetric ne couvre pas les exigences altrénatives, comme entourer des chaînes de guillemets ou convertir des tableaux d'objets.
Voici mes points de vue à ce sujet:
Pour un simple csv, une carte () et une jointure () suffisent:
Cette méthode vous permet également de spécifier un séparateur de colonnes autre qu'une virgule dans la jointure interne. par exemple un onglet:
d.join('\t')
D'un autre côté, si vous voulez le faire correctement et mettre des chaînes entre guillemets "", alors vous pouvez utiliser un peu de magie JSON:
si vous avez un tableau d'objets comme:
la source
.replace
devrait spécifier les crochets par rapport aux crochets..replace
se fait sur une chaîne retournée parvalues()
laquelle prend un objet et retourne un tableau de valeursvalues()
méthode n'a pas été trouvée lorsque j'ai essayé votre code.values()
explicitementObject
. J'ai corrigé l'exemple.De nombreuses solutions roll-your-own ici pour convertir des données en CSV, mais à peu près toutes auront diverses mises en garde en termes de type de données qu'elles formateront correctement sans déclencher Excel ou autres.
Pourquoi ne pas utiliser quelque chose de prouvé: Papa Parse
Ensuite, combinez simplement cela avec l'une des solutions de téléchargement locales ici, par exemple. celui de @ArneHB semble bon.
la source
Une fonction de flèche avec ES6:
Alors :
Si quelqu'un en a besoin pour reactjs,
react-csv
Est là pour çala source
react-csv
bibliothèque fonctionne comme un charme. Excellente solution pour toute personne utilisant des modules.Voici comment télécharger des fichiers CSV côté client dans mon application Java GWT. Un merci spécial à Xavier John pour sa solution. Il a été vérifié qu'il fonctionne dans FF 24.6.0, IE 11.0.20 et Chrome 45.0.2454.99 (64 bits). J'espère que cela fait gagner du temps à quelqu'un:
la source
Ce qui suit est une solution js native.
la source
Voici une version conviviale angulaire:
la source
Les réponses ci-dessus fonctionnent, mais gardez à l'esprit que si vous ouvrez au format .xls, les colonnes ~~ pourraient ~~ être séparées par
'\t'
au lieu de','
, la réponse https://stackoverflow.com/a/14966131/6169225 a bien fonctionné. pour moi, tant que j'ai utilisé.join('\t')
sur les tableaux au lieu de.join(',')
.la source
J'utilise cette fonction pour convertir un
string[][]
en un fichier csv. Il cite une cellule, si elle contient un"
, un,
ou un autre espace blanc (sauf les blancs):Remarque : ne fonctionne pas sur Internet Explorer <11 sauf s'il
map
est polyfilled.Remarque : Si les cellules contiennent des nombres, vous pouvez ajouter
cell=''+cell
avantif (cell.replace...
pour convertir des nombres en chaînes.Ou vous pouvez l'écrire sur une seule ligne en utilisant ES6:
la source
Je recommanderais d'utiliser une bibliothèque comme PapaParse: https://github.com/mholt/PapaParse
La réponse acceptée présente actuellement plusieurs problèmes, notamment:
la source
Essayez simplement ceci, certaines des réponses ici ne traitent pas les données unicode et les données qui ont une virgule par exemple la date.
la source
Télécharger le fichier CSV
la source
Au cas où quelqu'un en aurait besoin pour knockout js, cela fonctionne bien avec la solution proposée:
html:
voir le modèle:
la source
J'ai ajouté à la fonction Xavier Johns pour inclure également les en-têtes de champ si nécessaire, mais utilise jQuery. Le bit $ .each devra être changé pour une boucle javascript native
la source
Il s'agit d'une réponse modifiée basée sur la réponse acceptée dans laquelle les données proviendraient de JSON.
la source
Si vous cherchez une solution vraiment rapide, vous pouvez également donner une chance à cette petite bibliothèque qui créera et téléchargera le fichier CSV pour vous: https://github.com/mbrn/filefy
L'utilisation est très simple:
la source