ajout de l'export csv all js, et sans lib, on peut définir par défaut le délimiteur csv, le nom du csv, le clé : html/search ou autre si présent dans le json

js/gamutable.es6.js

@@ -76,6 +76,22 @@ Vue.nextTick(function () {
 	console.timeEnd('Chargement de VueJS AVANT Ajax');
 });
 
+function exporterCSV(json, delimitercsv, name) {
+	let csv = '';
+	json.forEach((l) => {
+		csv += l.join(delimitercsv);
+		csv += '\r\n';
+	});
+	//Download the file as CSV
+	let link = document.createElement('a');
+	link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
+	link.setAttribute('download', name);
+	link.style.visibility = 'hidden';
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+}
+
 let monTableau = {
 	props: {
 		tparpage: {
@@ -91,6 +107,18 @@ let monTableau = {
 		objet: {
 			type: String,
 		},
+		champcsv: {
+			type: String,
+			default: 'search',
+		},
+		delimitercsv: {
+			type: String,
+			default: ',',
+		},
+		namecsv: {
+			type: String,
+			default: 'export.csv',
+		},
 	},
 	data: function () {
 		return {
@@ -252,13 +280,14 @@ let monTableau = {
 			let $header = [];
 			let $tableau = [];
 			Object.keys(this.header).forEach((k) => $header.push(k));
-			$tableau = this.tableau.reduce(function (acc, ligne, i) {
+			$tableau = this.tableau.reduce((acc, ligne) => {
 				let $uneLigne = [];
-				Object.values(ligne.html).forEach((l) => $uneLigne.push(l));
+				Object.values(ligne[this.champcsv]).forEach((l) => $uneLigne.push(l));
 				return [...acc, [...$uneLigne]];
 			}, []);
 			$csv = [[...$header], ...$tableau];
-			console.log($csv);
+			//console.log($csv);
+			exporterCSV($csv, this.delimitercsv, this.namecsv);
 		},
 	},
 	template: `

js/gamutable.js

@@ -100,6 +100,23 @@ console.time('Chargement de VueJs APRES Ajax');
 Vue.nextTick(function () {
   console.timeEnd('Chargement de VueJS AVANT Ajax');
 });
+
+function exporterCSV(json, delimitercsv, name) {
+  var csv = '';
+  json.forEach(function (l) {
+    csv += l.join(delimitercsv);
+    csv += '\r\n';
+  }); //Download the file as CSV
+
+  var link = document.createElement('a');
+  link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
+  link.setAttribute('download', name);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 var monTableau = {
   props: {
     tparpage: {
@@ -114,6 +131,18 @@ var monTableau = {
     },
     objet: {
       type: String
+    },
+    champcsv: {
+      type: String,
+      default: 'search'
+    },
+    delimitercsv: {
+      type: String,
+      default: ','
+    },
+    namecsv: {
+      type: String,
+      default: 'export.csv'
     }
   },
   data: function data() {
@@ -282,6 +311,8 @@ var monTableau = {
       }
     },
     exportCSV: function exportCSV() {
+      var _this3 = this;
+
       var filtrage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var $csv = [];
       var $header = [];
@@ -289,15 +320,16 @@ var monTableau = {
       Object.keys(this.header).forEach(function (k) {
         return $header.push(k);
       });
-      $tableau = this.tableau.reduce(function (acc, ligne, i) {
+      $tableau = this.tableau.reduce(function (acc, ligne) {
         var $uneLigne = [];
-        Object.values(ligne.html).forEach(function (l) {
+        Object.values(ligne[_this3.champcsv]).forEach(function (l) {
           return $uneLigne.push(l);
         });
         return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
       }, []);
-      $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
+      $csv = [[].concat($header)].concat(_toConsumableArray($tableau)); //console.log($csv);
-      console.log($csv);
+
+      exporterCSV($csv, this.delimitercsv, this.namecsv);
     }
   },
   template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-2x fa-fw rouge\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"