--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 24 10:01:40 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 24 10:21:06 2019 +0200
@@ -35,6 +35,12 @@
           >
             <translate>Export to PDF</translate>
           </button>
+          <a
+            :href="dataLink"
+            :download="csvFileName"
+            class="mt-1 btn btn-sm btn-info"
+            >Download CSV</a
+          >
         </div>
       </DiagramLegend>
       <div
@@ -176,8 +182,19 @@
       "from",
       "to",
       "frequency",
-      "legend"
+      "legend",
+      "csv"
     ]),
+    dataLink() {
+      return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
+    },
+    csvFileName() {
+      return `${this.$gettext("fairwayavailability")}-${
+        this.selectedFairwayAvailabilityFeature.properties.name
+      }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate(
+        this.toDate
+      )}-${this.$gettext(this.frequency)}-.csv`;
+    },
     frequencyToRange() {
       const frequencies = {
         [FREQUENCIES.MONTHLY]: [-33, 33],

--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri May 24 10:01:40 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri May 24 10:21:06 2019 +0200
@@ -28,6 +28,9 @@
           >
             <translate>Export to PDF</translate>
           </button>
+          <a href="#" :download="csvFileName" class="mt-1 btn btn-sm btn-info"
+            >Download CSV</a
+          >
         </div>
       </DiagramLegend>
       <div
@@ -166,8 +169,19 @@
       "from",
       "to",
       "frequency",
-      "legendLNWL"
+      "legendLNWL",
+      "csv"
     ]),
+    dataLink() {
+      return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
+    },
+    csvFileName() {
+      return `${this.$gettext("fairwayavailabilityLNWL")}-${
+        this.selectedFairwayAvailabilityFeature.properties.name
+      }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate(
+        this.toDate
+      )}-${this.$gettext(this.frequency)}-.csv`;
+    },
     fromDate() {
       return this.from;
     },

--- a/client/src/store/fairwayavailability.js	Fri May 24 10:01:40 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Fri May 24 10:21:06 2019 +0200
@@ -87,6 +87,7 @@
     depthlimit2: 230,
     widthlimit1: null,
     widthlimit2: null,
+    csv: null,
     fwData: null,
     fwLNWLData: null,
     fwLNWLOverviewData: [],
@@ -144,6 +145,9 @@
     setFwLNWLData: (state, fwLNWLData) => {
       state.fwLNWLData = fwLNWLData;
     },
+    setCSV: (state, csv) => {
+      state.csv = csv;
+    },
     addFwLNWLOverviewData: (state, data) => {
       let existingIndex = state.fwLNWLOverviewData.findIndex(
         d => d.feature.get("id") === data.feature.get("id")
@@ -209,6 +213,7 @@
         })
           .then(response => {
             const { data } = response;
+            commit("setCSV", data);
             const csv = data.split("\n").filter(x => x !== ""); //omit empty lines
             commit("setLegend", csv.shift());
             let transformed = csv.map(e => {
@@ -241,7 +246,7 @@
           });
       });
     },
-    loadAvailableFairwayDepthLNWL: (context, options) => {
+    loadAvailableFairwayDepthLNWL: ({ commit }, options) => {
       return new Promise((resolve, reject) => {
         const { feature, frequency, LOS } = options;
         let { from, to } = options;
@@ -259,7 +264,9 @@
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            resolve(response.data);
+            const { data } = response;
+            commit("setCSV", data);
+            resolve(data);
           })
           .catch(error => {
             reject(error);