use blob to download file

src/services/feature-api.js

@@ -77,6 +77,19 @@ const featureAPI = {
       return null;
     }
   },
+
+  async getFeaturesBlob(url) {
+    const response = await axios
+      .get(url, { responseType: "blob" })
+    if (
+      response.status === 200 &&
+      response.data
+    ) {
+      return response.data;
+    } else {
+      return null;
+    }
+  },
 }
 
 export default featureAPI;

src/views/feature_type/Feature_type_detail.vue

@@ -102,7 +102,8 @@
           </div>
           <div :class="['content', { active: !showImport }]">
             <p>
-              Vous pouvez télécharger tous les signalements qui vous sont accessibles.
+              Vous pouvez télécharger tous les signalements qui vous sont
+              accessibles.
             </p>
             <button
               type="button"
@@ -192,6 +193,7 @@
 <script>
 import { mapGetters, mapState } from "vuex";
 import ImportTask from "@/components/ImportTask";
+import featureAPI from "@/services/feature-api";
 
 export default {
   name: "Feature_type_detail",
@@ -284,14 +286,10 @@ export default {
           options: el.options,
         };
       });
-      console.log({ json, fields });
       for (const feature of json.features) {
-        console.log(feature.properties);
         for (const { name, field_type, options } of fields) {
-          console.log("name", name, "field_type", field_type);
           //* check if custom field is present
           if (!(name in feature.properties)) {
-            console.log("NOT present");
             return false;
           }
           const fieldInFeature = feature.properties[name];
@@ -302,12 +300,10 @@ export default {
             if (field_type === "list") {
               //*then check if the value is an available option
               if (!options.includes(fieldInFeature)) {
-                console.log("NOT an element of list options");
                 return false;
               }
             } else if (customType !== field_type) {
               //* check if custom field value match
-              console.log("NOT matched");
               this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`;
               return false;
             }
@@ -344,8 +340,15 @@ export default {
 
     exportFeatures() {
       const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature-type/${this.$route.params.feature_type_slug}/export/`;
-      console.log(url);
-      window.open(url);
+      featureAPI
+        .getFeaturesBlob(url)
+        .then((blob) => {
+          const link = document.createElement("a");
+          link.href = URL.createObjectURL(blob);
+          link.download = `${this.project.title}-${this.structure.title}.json`;
+          link.click();
+          URL.revokeObjectURL(link.href);
+        })
     },
   },