--- a/client/src/components/Pdftool.vue	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/components/Pdftool.vue	Tue Sep 24 16:39:06 2019 +0200
@@ -118,6 +118,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { pdfgen, templateLoader } from "@/lib/mixins";
+import sanitize from "sanitize-filename";
 
 const paperSizes = {
   // in millimeter, landscape [width, height]
@@ -193,21 +194,14 @@
       return this.$gettext("Generate PDF");
     },
     filename() {
-      let date = new Date()
-        .toISOString()
-        .slice(0, 10)
-        .replace(/-/g, "");
       let filename = "map";
-
       if (this.selectedBottleneck) {
-        filename = this.selectedBottleneck;
+        filename = `BN-${sanitize(this.selectedBottleneck)}`;
         if (this.selectedSurvey) {
           filename += "-sr" + this.selectedSurvey.date_info.replace(/-/g, "");
         }
       }
-
-      filename = filename.toLowerCase() + "-exported" + date + ".pdf";
-      return filename;
+      return `${filename}-${this.dateForPDF()}.pdf`;
     }
   },
   methods: {
@@ -414,7 +408,6 @@
               }
             }
           });
-
           this.pdf.doc.save(this.filename);
         }
         map.setSize(this.mapSize);

--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Sep 24 16:39:06 2019 +0200
@@ -91,6 +91,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
+import sanitize from "sanitize-filename";
 
 export default {
   mixins: [diagram, pdfgen, templateLoader],
@@ -289,7 +290,10 @@
         templateData: this.templateData,
         diagramTitle: title
       });
-      this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
+      const filename = `AFDLNWL-${sanitize(
+        this.featureName
+      )}-${this.dateForPDF()}.pdf`;
+      this.pdf.doc.save(filename);
     },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,

--- a/client/src/components/fairway/Fairwayprofile.vue	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Tue Sep 24 16:39:06 2019 +0200
@@ -144,6 +144,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
+import sanitize from "sanitize-filename";
 
 const GROUND_COLOR = "#4A2F06";
 const WATER_COLOR = "#005DFF";
@@ -318,15 +319,14 @@
     downloadPDF() {
       let fairwayInfo =
         this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")";
-
       this.generatePDF({
         templateData: this.templateData,
         diagramTitle: fairwayInfo
       });
-
-      this.pdf.doc.save(
-        this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf"
-      );
+      const filename = `Fairwayprofile-${sanitize(
+        this.selectedBottleneck
+      )}-${this.dateForPDF()}.pdf`;
+      this.pdf.doc.save(filename);
     },
 
     // Diagram legend

--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Sep 24 16:39:06 2019 +0200
@@ -108,6 +108,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
+import sanitize from "sanitize-filename";
 
 export default {
   mixins: [diagram, pdfgen, templateLoader],
@@ -223,11 +224,10 @@
         templateData: this.templateData,
         diagramTitle: diagramTitle
       });
-
-      this.pdf.doc.save(
-        this.selectedGaugeD.properties.objname +
-          " Hydrological-condition Diagram.pdf"
-      );
+      const filename = `HydrologicalCondition-${sanitize(
+        this.selectedGaugeD.properties.objname
+      )}-${this.dateForPDF()}.pdf`;
+      this.pdf.doc.save(filename);
     },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {

--- a/client/src/components/gauge/Waterlevel.vue	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Sep 24 16:39:06 2019 +0200
@@ -120,6 +120,7 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
+import sanitize from "sanitize-filename";
 // we should load only d3 modules we need but for now we'll go with the lazy way
 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
@@ -229,9 +230,10 @@
         templateData: this.templateData,
         diagramTitle: diagramTitle
       });
-      this.pdf.doc.save(
-        this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
-      );
+      const filename = `Waterlevel-${sanitize(
+        this.selectedGauge.properties.objname
+      )}-${this.dateForPDF()}.pdf`;
+      this.pdf.doc.save(filename);
     },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {

--- a/client/src/lib/mixins.js	Tue Sep 24 13:37:39 2019 +0200
+++ b/client/src/lib/mixins.js	Tue Sep 24 16:39:06 2019 +0200
@@ -525,6 +525,12 @@
           text
         );
       }
+    },
+    dateForPDF() {
+      return new Date()
+        .toISOString()
+        .slice(0, 10)
+        .replace(/-/g, "");
     }
   }
 };