Comment exporter des informations de tableau JavaScript au format csv (côté client)?
Je sais qu'il y a beaucoup de questions de cette nature mais je dois le faire en utilisant JavaScript. J'utilise Dojo 1.8 et j'ai toutes les informations sur les attributs dans un tableau, qui ressemble à ceci:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
Avez-vous une idée de la manière dont je peux exporter ceci vers CSV côté client?
Vous pouvez le faire en JavaScript natif. Vous devrez alors analyser vos données au format CSV correct (en supposant que vous utilisiez 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 le chemin le plus court (en utilisant les fonctions de flèche ):
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");
Vous pouvez ensuite utiliser les fonctions window.open et encodeURI de JavaScript pour télécharger le fichier CSV comme suit:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Modifier:
Si vous souhaitez attribuer un nom spécifique à votre fichier, vous devez procéder différemment, car l'accès à un URI de données à l'aide de la méthodewindow.open n'est pas pris en charge. Pour ce faire, vous pouvez créer un nœud DOM <a> masqué et définir son attribut download 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".
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.
function exportToCsv(filename, rows) {
var processRow = function (row) {
var finalVal = '';
for (var j = 0; j < row.length; j++) {
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
};
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0)
result = '"' + result + '"';
if (j > 0)
finalVal += ',';
finalVal += result;
}
return finalVal + '\n';
};
var csvFile = '';
for (var i = 0; i < rows.length; i++) {
csvFile += processRow(rows[i]);
}
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Par exemple: https://jsfiddle.net/jossef/m3rrLzk0/
Cette solution devrait fonctionner avec Internet Explorer 10+, Edge, anciennes et nouvelles versions de Chrome, FireFox, Safari, ++.
La réponse acceptée ne fonctionnera pas avec IE et Safari.
// Example data given in question text
var data = [
['name1', 'city1', 'some other info'],
['name2', 'city2', 'more info']
];
// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
dataString = infoArray.join(';');
csvContent += index < data.length ? dataString + '\n' : dataString;
});
// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
var a = document.createElement('a');
mimeType = mimeType || 'application/octet-stream';
if (navigator.msSaveBlob) { // IE10
navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
} else if (URL && 'download' in a) { //html5 A[download]
a.href = URL.createObjectURL(new Blob([content], {
type: mimeType
}));
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
}
}
download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');L'exécution de l'extrait de code téléchargera les données fictives en tant que csv
Crédits à dandavis https://stackoverflow.com/a/16377813/1350598
Je suis venu ici pour obtenir un peu plus de conformité à la norme RFC 4180 et je n’ai pas réussi à trouver une implémentation; j’en ai donc créé une (peut-être inefficace) pour mes propres besoins. Je pensais que je le partagerais avec tout le monde.
var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];
var finalVal = '';
for (var i = 0; i < content.length; i++) {
var value = content[i];
for (var j = 0; j < value.length; j++) {
var innerValue = value[j]===null?'':value[j].toString();
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0)
result = '"' + result + '"';
if (j > 0)
finalVal += ',';
finalVal += result;
}
finalVal += '\n';
}
console.log(finalVal);
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');
Espérons que cela aidera quelqu'un à l'avenir. Cela combine à la fois l’encodage du fichier CSV et la possibilité de télécharger le fichier. Dans mon exemple sur jsfiddle . Vous pouvez télécharger le fichier (en supposant le navigateur HTML 5) ou afficher le résultat dans la console.
METTRE À JOUR:
Chrome semble maintenant avoir perdu la possibilité de nommer le fichier. Je ne sais pas trop ce qui s'est passé ni comment y remédier, mais chaque fois que j'utilise ce code (y compris le jsfiddle), le fichier téléchargé s'appelle désormais download.csv.
La solution de @Default fonctionne parfaitement sur Chrome (merci beaucoup pour cela!), Mais j'ai eu un problème avec IE.
Voici une solution (fonctionne sur IE10):
var csvContent=data; //here we load our csv data
var blob = new Blob([csvContent],{
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, "filename.csv")
Dans Chrome 35 Update, le comportement de l'attribut de téléchargement a été modifié.
https://code.google.com/p/chromium/issues/detail?id=373182
pour travailler cela en chrome, utilisez cette
var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();
Travailler pour toutes les langues
function convertToCsv(fName, rows) {
var csv = '';
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
for (var j = 0; j < row.length; j++) {
var val = row[j] === null ? '' : row[j].toString();
val = val.replace(/\t/gi, " ");
if (j > 0)
csv += '\t';
csv += val;
}
csv += '\n';
}
// for UTF-16
var cCode, bArr = [];
bArr.Push(255, 254);
for (var i = 0; i < csv.length; ++i) {
cCode = csv.charCodeAt(i);
bArr.Push(cCode & 0xff);
bArr.Push(cCode / 256 >>> 0);
}
var blob = new Blob([new Uint8Array(bArr)], { type: 'text/csv;charset=UTF-16LE;' });
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fName);
} else {
var link = document.createElement("a");
if (link.download !== undefined) {
var url = window.URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", fName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}
}
}
convertToCsv('download.csv', [
['Order', 'Language'],
['1', 'English'],
['2', 'Español'],
['3', 'Français'],
['4', 'Português'],
['5', 'čeština'],
['6', 'Slovenščina'],
['7', 'Tiếng Việt'],
['8', 'Türkçe'],
['9', 'Norsk bokmål'],
['10', 'Ελληνικά'],
['11', 'беларускі'],
['12', 'русский'],
['13', 'Українська'],
['14', 'հայերեն'],
['15', 'עִברִית'],
['16', 'اردو'],
['17', 'नेपाली'],
['18', 'हिंदी'],
['19', 'ไทย'],
['20', 'ქართული'],
['21', '中国'],
['22', '한국어'],
['23', '日本語'],
])
Voilà :
<!doctype html>
<html>
<head></head>
<body>
<a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>
<script type="text/javascript">
var stockData = [
{
Symbol: "AAPL",
Company: "Apple Inc.",
Price: "132.54"
},
{
Symbol: "INTC",
Company: "Intel Corporation",
Price: "33.45"
},
{
Symbol: "GOOG",
Company: "Google Inc",
Price: "554.52"
},
];
function convertArrayOfObjectsToCSV(args) {
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
data = args.data || null;
if (data == null || !data.length) {
return null;
}
columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n';
keys = Object.keys(data[0]);
result = '';
result += keys.join(columnDelimiter);
result += lineDelimiter;
data.forEach(function(item) {
ctr = 0;
keys.forEach(function(key) {
if (ctr > 0) result += columnDelimiter;
result += item[key];
ctr++;
});
result += lineDelimiter;
});
return result;
}
window.downloadCSV = function(args) {
var data, filename, link;
var csv = convertArrayOfObjectsToCSV({
data: stockData
});
if (csv == null) return;
filename = args.filename || 'export.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
//It work in Chrome and IE ... I reviewed and readed a lot of answer. then i used it and tested in both ...
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var blob = new Blob([CSV], { type: 'text/csv;charset=utf-8;' });
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", fileName);
link.style = "visibility:hidden";
}
if (navigator.msSaveBlob) { // IE 10+
link.addEventListener("click", function (event) {
var blob = new Blob([CSV], {
"type": "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, fileName);
}, false);
}
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
//Regards
Créez 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 i.e if window.navigator.mSaveOrOpenBlob)===true, enregistrez les données CSV à l’aide de: window.navigator.msSaveBlob(blob, 'filename.csv').
Si le navigateur ne prend pas en charge l’enregistrement et l’ouverture de blobs, sauvegardez les données csv sous:
var downloadLink = document.createElement('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);
Extrait de code complet:
var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
var downloadLink = document.element('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);
downloadLink[0].click();
}
Il y a deux questions ici:
- Comment convertir un tableau en chaîne csv
- Comment enregistrer cette chaîne dans un fichier
Toutes les réponses à la première question (à l’exception de celle de Milimetric) semblent ici excessives. Et celui de Milimetric ne couvre pas les exigences essentielles, telles que les chaînes entourées de guillemets ou la conversion de tableaux d'objets.
Voici mes prises sur ceci:
Pour un simple csv, un map () et un join () suffisent:
var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
var csv = test_array.map(function(d){
return d.join();
}).join('\n');
/* Results in
name1,2,3
name2,4,5
name3,6,7
name4,8,9
name5,10,11
Cette méthode vous permet également de spécifier un séparateur de colonne autre qu'une virgule dans la jointure interne. par exemple un onglet: d.join('\t')
D'autre part, si vous voulez le faire correctement et entourer les chaînes de guillemets "", vous pouvez utiliser la magie JSON:
var csv = test_array.map(function(d){
return JSON.stringify(d);
})
.join('\n')
.replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ]
// brackets from each line
/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11
si vous avez un tableau d'objets comme:
var data = [
{"title": "Book title 1", "author": "Name1 Surname1"},
{"title": "Book title 2", "author": "Name2 Surname2"},
{"title": "Book title 3", "author": "Name3 Surname3"},
{"title": "Book title 4", "author": "Name4 Surname4"}
];
// use
var csv = data.map(function(d){
return JSON.stringify(Object.values(d));
})
.join('\n')
.replace(/(^\[)|(\]$)/mg, '');
Il existe ici beaucoup de solutions personnalisables pour la conversion de données au format CSV, mais la quasi-totalité d’entre elles comporteront diverses réserves quant au type de données qu’elles vont formater correctement sans déranger Excel ou autres.
Pourquoi ne pas utiliser quelque chose qui a fait ses preuves: Papa Parse
Papa.unparse(data[, config])
Ensuite, combinez simplement cela avec l’une des solutions de téléchargement locales, par exemple. celui de @ArneHB a l'air bien.
Une fonction de flèche avec ES6:
const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) => row.join(',')).join(`\n`)}`
);
Ensuite :
window.open(
dataToCsvURI(
[["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
)
);
Si quelqu'un a besoin de cela pour reactjs , react-csv est là pour ça
Vous pouvez utiliser le code ci-dessous pour exporter un tableau dans un fichier CSV à l'aide de Javascript.
Cela gère aussi les caractères spéciaux
var arrayContent = [["Séjour 1, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
var csvContent = arrayContent.join("\n");
var link = window.document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));
link.setAttribute("download", "upload_data.csv");
link.click();
Ici est le lien pour travailler jsfiddle
Voici comment je télécharge 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 fonctionnait dans les versions 24.6.0, IE 11.0.20 et Chrome 45.0.2454.99 (64 bits). J'espère que cela fera gagner un peu de temps à quelqu'un:
public class ExportFile
{
private static final String CRLF = "\r\n";
public static void exportAsCsv(String filename, List<List<String>> data)
{
StringBuilder sb = new StringBuilder();
for(List<String> row : data)
{
for(int i=0; i<row.size(); i++)
{
if(i>0) sb.append(",");
sb.append(row.get(i));
}
sb.append(CRLF);
}
generateCsv(filename, sb.toString());
}
private static native void generateCsv(String filename, String text)
/*-{
var blob = new Blob([text], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) // IE 10+
{
navigator.msSaveBlob(blob, filename);
}
else
{
var link = document.createElement("a");
if (link.download !== undefined) // feature detection
{
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}-*/;
}
Voici une version conviviale angulaire:
constructor(private location: Location, private renderer: Renderer2) {}
download(content, fileName, mimeType) {
const a = this.renderer.createElement('a');
mimeType = mimeType || 'application/octet-stream';
if (navigator.msSaveBlob) {
navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
}
else if (URL && 'download' in a) {
const id = GetUniqueID();
this.renderer.setAttribute(a, 'id', id);
this.renderer.setAttribute(a, 'href', URL.createObjectURL(new Blob([content], {
type: mimeType
})));
this.renderer.setAttribute(a, 'download', fileName);
this.renderer.appendChild(document.body, a);
const anchor = this.renderer.selectRootElement(`#${id}`);
anchor.click();
this.renderer.removeChild(document.body, a);
}
else {
this.location.go(`data:application/octet-stream,${encodeURIComponent(content)}`);
}
};
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(',').
Les gens essaient de créer leur propre chaîne csv, ce qui échoue dans les cas Edge, par exemple. caractères spéciaux et autres, c’est sûrement un problème résolu, non?
papaparse - à utiliser pour l'encodage JSON vers CSV. Papa.unparse().
import Papa from "papaparse";
const downloadCSV = (args) => {
let filename = args.filename || 'export.csv';
let columns = args.columns || null;
let csv = Papa.unparse({ data: args.data, fields: columns})
if (csv == null) return;
var blob = new Blob([csv]);
if (window.navigator.msSaveOrOpenBlob) // IE hack; see http://msdn.Microsoft.com/en-us/library/ie/hh779016.aspx
window.navigator.msSaveBlob(blob, args.filename);
else
{
var a = window.document.createElement("a");
a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
a.download = filename;
document.body.appendChild(a);
a.click(); // IE: "Access is denied"; see: https://connect.Microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-Origin-and-denies-access
document.body.removeChild(a);
}
}
Exemple d'utilisation
downloadCSV({
filename: 'filename.csv',
data: [{'a': '1', 'b': 2'}],
columns: ['a','b']
});
https://github.com/mholt/PapaParse/issues/175 - Consultez ce commentaire pour en savoir plus sur le support du navigateur.
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 date.
function downloadUnicodeCSV(filename, datasource) {
var content = '', newLine = '\r\n';
for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
var line = datasource_1[_i];
var i = 0;
for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
var item = line_1[_a];
var it = item.replace(/"/g, '""');
if (it.search(/("|,|\n)/g) >= 0) {
it = '"' + it + '"';
}
content += (i > 0 ? ',' : '') + it;
++i;
}
content += newLine;
}
var link = document.createElement('a');
link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
J'ai ajouté à la fonction de Xavier Johns d'inclure également les en-têtes de champ si nécessaire, utilise jQuery cependant. Le bit $ .each devra être remplacé par une boucle JavaScript native.
function exportToCsv(filename, rows, headers = false) {
var processRow = function (row) {
row = $.map(row, function(value, index) {
return [value];
});
var finalVal = '';
for (var j = 0; j < row.length; j++) {
if(i == 0 && j == 0 && headers == true){
var ii = 0;
$.each(rows[i], function( index, value ) {
//console.log(index);
var fieldName = index === null ? '' : index.toString();
//console.log(fieldName);
var fieldResult = fieldName.replace(/"/g, '""');
//console.log(fieldResult);
if (fieldResult.search(/("|,|\n)/g) >= 0){
fieldResult = '"' + fieldResult + '"';
}
//console.log(fieldResult);
if (ii > 0){
finalVal += ',';
finalVal += fieldResult;
}else{
finalVal += fieldResult;
}
ii++;
//console.log(finalVal);
});
finalVal += '\n';
//console.log('end: '+finalVal);
}
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
};
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0){
result = '"' + result + '"';
}
if (j > 0){
finalVal += ',';
finalVal += result;
}else{
finalVal += result;
}
}
return finalVal + '\n';
};
var csvFile = '';
for (var i = 0; i < rows.length; i++) {
csvFile += processRow(rows[i]);
}
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
}else{
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
J'utilise cette fonction pour convertir un string[][] en fichier csv. Il cite une cellule, si elle contient un ", un , ou un autre espace (à l'exception des blancs):
/**
* Takes an array of arrays and returns a `,` sparated csv file.
* @param {string[][]} table
* @returns {string}
*/
function toCSV(table) {
return table
.map(function(row) {
return row
.map(function(cell) {
// We remove blanks and check if the column contains
// other whitespace,`,` or `"`.
// In that case, we need to quote the column.
if (cell.replace(/ /g, '').match(/[\s,"]/)) {
return '"' + cell.replace(/"/g, '""') + '"';
}
return cell;
})
.join(',');
})
.join('\n'); // or '\r\n' for windows
}
Remarque : ne fonctionne pas avec Internet Explorer <11 à moins que map soit polyfilled.
Remarque : Si les cellules contiennent des nombres, vous pouvez ajouter cell=''+cell avant if (cell.replace... pour convertir les nombres en chaînes.
Ou vous pouvez l'écrire sur une ligne en utilisant ES6:
t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
Au cas où quelqu'un aurait besoin de cela pour knock-out js, cela fonctionnerait avec la solution proposée
html:
<a data-bind="attr: {download: filename, href: csvContent}">Download</a>
voir le modèle:
// for the download link
this.filename = ko.computed(function () {
return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
if (!this.csvLink) {
var data = ko.unwrap(this.data),
ret = 'data:text/csv;charset=utf-8,';
ret += data.map(function (row) {
return row.join(',');
}).join('\n');
return encodeURI(ret);
}
}, this);
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.
JSON Data Ouptut:
0 :{emails: "SAMPLE Co., [email protected]"}, 1:{emails: "Another CO. , [email protected]"}
JS:
$.getJSON('yourlink_goes_here', { if_you_have_parameters}, function(data) {
var csvContent = "data:text/csv;charset=utf-8,";
var dataString = '';
$.each(data, function(k, v) {
dataString += v.emails + "\n";
});
csvContent += dataString;
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "your_filename.csv");
document.body.appendChild(link); // Required for FF
link.click();
});
Je recommanderais d'utiliser une bibliothèque comme PapaParse: https://github.com/mholt/PapaParse
La réponse acceptée pose actuellement plusieurs problèmes, notamment:
- il échoue si les données contiennent une virgule
- il échoue si les données contiennent un saut de ligne
- il (en quelque sorte) échoue si les données contiennent un guillemet