--- a/client/src/components/Pdftool.vue	Thu Jul 04 10:50:19 2019 +0200
+++ b/client/src/components/Pdftool.vue	Thu Jul 04 10:57:43 2019 +0200
@@ -106,7 +106,7 @@
 import { getPointResolution } from "ol/proj";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
-import { pdfgen } from "@/lib/mixins";
+import { pdfgen, templateLoader } from "@/lib/mixins";
 
 var paperSizes = {
   // in millimeter, landscape [width, height]
@@ -115,7 +115,7 @@
 };
 
 export default {
-  mixins: [pdfgen],
+  mixins: [pdfgen, templateLoader],
   name: "pdftool",
   data() {
     return {
@@ -211,58 +211,21 @@
     // applied to the rest of the form.
     applyTemplateToForm() {
       if (this.form.template) {
-        HTTP.get(
-          "/templates/" +
-            this.form.template.type +
-            "/" +
-            this.form.template.name,
-          {
-            headers: {
-              "X-Gemma-Auth": localStorage.getItem("token"),
-              "Content-type": "text/xml; charset=UTF-8"
-            }
-          }
+        this.loadTemplates(
+          `/templates/${this.form.template.type}/${this.form.template.name}`
         )
           .then(response => {
-            this.templateData = response.data.template_data;
-            /**
-             * In order to render the images from the template, we need to convert
-             * each image to dataURIs. Since this happens asynchronous,
-             * we need to wrap each image into its own promise and only after all are
-             * finished, we continue with the flow.
-             */
-            const imageElementLoaders = response.data.template_data.elements.reduce(
-              (o, n, i) => {
-                if (n.type === "image") {
-                  o.push(
-                    new Promise(resolve => {
-                      const image = new Image();
-                      image.onload = function() {
-                        var canvas = document.createElement("canvas");
-                        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
-                        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
-                        canvas.getContext("2d").drawImage(this, 0, 0);
-                        resolve({
-                          index: i,
-                          url: canvas.toDataURL("image/png")
-                        });
-                      };
-                      image.src = n.url;
-                    })
-                  );
-                }
-                return o;
-              },
-              []
+            this.prepareImages(response.data.template_data.elements).then(
+              values => {
+                this.templateData = response.data.template_data;
+                values.forEach(v => {
+                  response.data.template_data.elements[v.index].url = v.url;
+                });
+                this.form.format = this.templateData.properties.format;
+                this.form.paperSize = this.templateData.properties.paperSize;
+                this.form.resolution = this.templateData.properties.resolution;
+              }
             );
-            Promise.all(imageElementLoaders).then(values => {
-              values.forEach(v => {
-                response.data.template_data.elements[v.index].url = v.url;
-              });
-              this.form.format = this.templateData.properties.format;
-              this.form.paperSize = this.templateData.properties.paperSize;
-              this.form.resolution = this.templateData.properties.resolution;
-            });
           })
           .catch(e => {
             const { status, data } = e.response;

--- a/client/src/lib/mixins.js	Thu Jul 04 10:50:19 2019 +0200
+++ b/client/src/lib/mixins.js	Thu Jul 04 10:57:43 2019 +0200
@@ -16,6 +16,7 @@
 import jsPDF from "jspdf-yworks";
 import locale2 from "locale2";
 import { mapState } from "vuex";
+import { HTTP } from "@/lib/http";
 
 export const sortTable = {
   data() {
@@ -64,6 +65,61 @@
   }
 };
 
+export const templateLoader = {
+  methods: {
+    loadTemplates(url) {
+      return new Promise((resolve, reject) => {
+        HTTP.get(url, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    },
+    prepareImages(elements) {
+      /**
+       * In order to render the images from the template, we need to convert
+       * each image to dataURIs. Since this happens asynchronous,
+       * we need to wrap each image into its own promise and only after all are
+       * finished, we continue with the flow.
+       */
+      return new Promise(resolve => {
+        const imageElementLoaders = elements.reduce((o, n, i) => {
+          if (n.type === "image") {
+            o.push(
+              new Promise(resolve => {
+                const image = new Image();
+                image.onload = function() {
+                  var canvas = document.createElement("canvas");
+                  canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
+                  canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
+                  canvas.getContext("2d").drawImage(this, 0, 0);
+                  resolve({
+                    index: i,
+                    url: canvas.toDataURL("image/png")
+                  });
+                };
+                image.src = n.url;
+              })
+            );
+          }
+          return o;
+        }, []);
+        Promise.all(imageElementLoaders).then(values => {
+          resolve(values);
+        });
+      });
+    }
+  }
+};
+
 export const pdfgen = {
   computed: {
     ...mapState("application", ["logoForPDF"]),