diff --git a/src/main/java/fr/inra/oresing/rest/OreSiResources.java b/src/main/java/fr/inra/oresing/rest/OreSiResources.java
index 1cc3db7c6b78b475d91885049002422bd8c674bd..cb80dc4eb114dd8005b207dec09b1c489cf2bccb 100644
--- a/src/main/java/fr/inra/oresing/rest/OreSiResources.java
+++ b/src/main/java/fr/inra/oresing/rest/OreSiResources.java
@@ -329,7 +329,7 @@ public class OreSiResources {
     /**
      * export as CSV
      */
-    @GetMapping(value = "/applications/{nameOrId}/data/{dataType}/csv", produces = MediaType.TEXT_PLAIN_VALUE)
+    @GetMapping(value = "/applications/{nameOrId}/data/{dataType}/csv", produces = {MediaType.TEXT_PLAIN_VALUE, MediaType.APPLICATION_OCTET_STREAM_VALUE})
     public ResponseEntity<String> getAllDataCsvForce(
             @PathVariable("nameOrId") String nameOrId,
             @PathVariable("dataType") String dataType,
diff --git a/ui/src/services/Fetcher.js b/ui/src/services/Fetcher.js
index 35934f54fdeb9c5cc22812cb0f7c8099a9766744..077a9ac6aa5939e297adae76dae2167d8b1495bb 100644
--- a/ui/src/services/Fetcher.js
+++ b/ui/src/services/Fetcher.js
@@ -45,7 +45,7 @@ export class Fetcher {
     return this._handleResponse(response);
   }
 
-  async get(url, params = {}) {
+  async get(url, params = {}, isText) {
     const path = new URL(url, config.API_URL);
 
     Object.entries(params).forEach(([name, value]) => {
@@ -67,7 +67,7 @@ export class Fetcher {
       },
     });
 
-    return this._handleResponse(response);
+    return this._handleResponse(response, isText);
   }
 
   async delete(url, data) {
@@ -91,9 +91,9 @@ export class Fetcher {
     return Promise.reject({ status: response.status });
   }
 
-  async _handleResponse(response) {
+  async _handleResponse(response, isText) {
     try {
-      const text = await response.json();
+      const text = await isText?response.text():response.json();
       if (response.ok && response.status !== HttpStatusCodes.NO_CONTENT) {
         return Promise.resolve(text);
       }
@@ -107,11 +107,21 @@ export class Fetcher {
     return Promise.reject({ httpResponseCode: response.status });
   }
 
-  async downloadFile(urlPath) {
+  async showFile(urlPath) {
     const url = new URL(`${config.API_URL}${urlPath}`);
     window.open(url, "_blank");
   }
 
+  async downloadFile(urlPath) {
+    const url = new URL(`${config.API_URL}${urlPath}`);
+    console.log(url)
+    const link = document.createElement("a");
+    link.href=url;
+    link.type='application/octet-stream'
+    link.download = "export.csv"
+    link.click();
+  }
+
   notifyCrendentialsLost() {
     localStorage.removeItem(LOCAL_STORAGE_AUTHENTICATED_USER);
     app.$router.push("/login").catch(() => {});
@@ -136,4 +146,4 @@ export class Fetcher {
       Locales.FRENCH
     );
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/services/rest/DataService.js b/ui/src/services/rest/DataService.js
index e65b115fc3702930e951a606e5d0af55d41d07ea..fac3f365bfad87be20826a0ed35a6df9f88d22e9 100644
--- a/ui/src/services/rest/DataService.js
+++ b/ui/src/services/rest/DataService.js
@@ -13,11 +13,10 @@ export class DataService extends Fetcher {
     });
   }
 
-  async getDataTypesCsv(applicationName, dataTypeId, offset, limit) {
-    return this.downloadFile(`applications/${applicationName}/data/${dataTypeId}/csv`, {
-      offset: offset,
-      limit: limit,
-    });
+  async getDataTypesCsv(applicationName, dataTypeId, params) {
+    return this.get(`applications/${applicationName}/data/${dataTypeId}/csv`, {
+      downloadDatasetQuery: JSON.stringify(params),
+    }, true);
   }
 
   async addData(applicationName, dataTypeId, dataTypeFile, params) {
@@ -26,4 +25,4 @@ export class DataService extends Fetcher {
       params: JSON.stringify(params),
     });
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/services/rest/ReferenceService.js b/ui/src/services/rest/ReferenceService.js
index 5a78d0f87ca751e8539d743a3bca631afa1b0e3a..5958ab24a3581ddf38baee24ce10549e79625137 100644
--- a/ui/src/services/rest/ReferenceService.js
+++ b/ui/src/services/rest/ReferenceService.js
@@ -16,7 +16,7 @@ export class ReferenceService extends Fetcher {
   }
 
   async getReferenceCsv(applicationName, referenceId) {
-    return this.downloadFile(`applications/${applicationName}/references/${referenceId}/csv`);
+    return this.get(`applications/${applicationName}/references/${referenceId}/csv`, {}, true);
   }
 
   async createReference(applicationName, referenceId, refFile) {
@@ -24,4 +24,4 @@ export class ReferenceService extends Fetcher {
       file: refFile,
     });
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index a5c9332913417b9ea8650c05f00763dedc658e40..f9a46aa2d486745087271caa542bcb7dfb723d73 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -424,6 +424,14 @@
         @change="changePage"
       >
       </b-pagination>
+      <div class="buttons" style="margin-top: 16px">
+        <b-button
+          type="is-primary"
+          @click.prevent="downloadResultSearch"
+          style="margin-bottom: 15px; float: right"
+          >Télécharger</b-button
+        >
+      </div>
     </div>
   </PageView>
 </template>
@@ -768,6 +776,29 @@ export default class DataTypeTableView extends Vue {
     this.initDatatype();
     this.showFilter = false;
   }
+
+  async downloadResultSearch(){
+    this.params.variableComponentFilters = [];
+    for (var i = 0; i < this.variableSearch.length; i++) {
+      if (this.variableSearch[i]) {
+        this.params.variableComponentFilters.push(this.variableSearch[i]);
+      }
+    }
+    let param = {...this.params, offset: 0, limit: 42, dataType: this.dataTypeId, applicationNameOrId: this.applicationName}
+    let csv = await this.dataService.getDataTypesCsv(
+      this.applicationName,
+      this.dataTypeId,
+      param
+    );
+    var hiddenElement = document.createElement('a');
+    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+
+    //provide the name for the CSV file to be downloaded
+    hiddenElement.download = 'export.csv';
+    hiddenElement.click();
+    return false;
+  }
+
   clearSearch() {
     for (var i = 0; i < this.variableSearch.length; i++) {
       this.params.variableComponentFilters = [];
@@ -786,8 +817,8 @@ export default class DataTypeTableView extends Vue {
     var value = row[variable][component];
     var lang = '__display_'+localStorage.getItem('lang')
     if (this.referenceLineCheckers[key]) {
-      if (this.referenceLineCheckers[key].referenceValue && this.referenceLineCheckers[key].referenceValue.refValues ) {
-        var display = this.referenceLineCheckers[key].referenceValue.refValues.evaluationContext.datum[lang];
+      if (this.referenceLineCheckers[key].referenceValues && this.referenceLineCheckers[key].referenceValues.refValues ) {
+        var display = this.referenceLineCheckers[key].referenceValues.refValues.evaluationContext.datum[lang];
         return display ? display : value;
       }
     }
diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue
index 003567384e4ceabafda44511b15450de120e3753..e7b6f8ff977f88046b4b586d687be14b9ddcb6ca 100644
--- a/ui/src/views/datatype/DataTypesManagementView.vue
+++ b/ui/src/views/datatype/DataTypesManagementView.vue
@@ -88,6 +88,7 @@ import { InternationalisationService } from "@/services/InternationalisationServ
 import DataTypeDetailsPanel from "@/components/datatype/DataTypeDetailsPanel.vue";
 import AvailablityChart from "@/components/charts/AvailiblityChart.vue";
 import DetailModalCard from "@/components/charts/DetailModalCard";
+import {DownloadDatasetQuery} from "@/model/application/DownloadDatasetQuery";
 
 @Component({
   components: {
@@ -264,8 +265,20 @@ export default class DataTypesManagementView extends Vue {
     }
   }
 
-  async downloadDataType(event, label) {
-    this.dataService.getDataTypesCsv(this.applicationName, label);
+  async downloadDataType(event) {
+    let param = new DownloadDatasetQuery(this.application, this.applicationName, event)
+    console.log('download',new DownloadDatasetQuery(),  event)
+    let csv = await this.dataService.getDataTypesCsv(
+        this.applicationName,
+        event,
+        param);
+    var hiddenElement = document.createElement('a');
+    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+
+    //provide the name for the CSV file to be downloaded
+    hiddenElement.download = 'export.csv';
+    hiddenElement.click();
+    return false;
   }
 
   checkMessageErrors(error) {
@@ -297,4 +310,4 @@ export default class DataTypesManagementView extends Vue {
   margin-bottom: 10px;
   border: 1px solid white;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index ef2d42f08724d87bd43073cb41f7b2d8468c6615..97882f58b66a9b64b70b2fe13b9d9964cdbce83b 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -146,10 +146,18 @@ export default class ReferencesManagementView extends Vue {
     }
   }
 
-  downloadReference(label) {
+  async downloadReference(label) {
     const reference = this.findReferenceByLabel(label);
     if (reference) {
-      this.referenceService.getReferenceCsv(this.applicationName, reference.id);
+      let csv = await this.referenceService.getReferenceCsv(this.applicationName, reference.id);
+      console.log(csv)
+      var hiddenElement = document.createElement('a');
+      hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+
+      //provide the name for the CSV file to be downloaded
+      hiddenElement.download = 'export.csv';
+      hiddenElement.click();
+      return false;
     }
   }