--- a/client/src/lib/mixins.js	Mon Oct 28 13:07:01 2019 +0100
+++ b/client/src/lib/mixins.js	Mon Oct 28 16:38:23 2019 +0100
@@ -169,15 +169,35 @@
   },
   methods: {
     downloadImage(elementName) {
-      const diagramContainer = document.getElementById(this.containerId);
+      const offScreen = document.querySelector("#offScreen");
+      const DPI = 96;
+      const svgWidth = this.millimeter2pixels(428, DPI);
+      const svgHeight = this.millimeter2pixels(119, DPI);
+      offScreen.style.width = `${svgWidth}px`;
+      offScreen.style.height = `${svgHeight}px`;
+      let zoomLevel = this.zoomStore;
+      const layout = this.getPrintLayout(svgHeight, svgWidth);
+      this.renderTo({
+        element: offScreen,
+        dimensions: this.getDimensions({
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
+          ...layout
+        }),
+        zoomLevel // passing the zoom level to draw the diagram on pdf at this point
+      });
+      const diagramContainer = document.getElementById("offScreen");
       const { clientHeight, clientWidth } = diagramContainer;
-      diagramContainer.firstElementChild.setAttribute("width", clientWidth);
-      diagramContainer.firstElementChild.setAttribute("height", clientHeight);
-      const svg = diagramContainer.firstElementChild.outerHTML;
+      diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
+      diagramContainer
+        .querySelector("svg")
+        .setAttribute("height", clientHeight);
+      const svg = diagramContainer.querySelector("svg").outerHTML;
       const canvas = document.createElement("canvas");
       canvg(canvas, svg);
       const imgData = canvas.toDataURL("image/png");
       document.getElementById(elementName).setAttribute("href", imgData);
+      offScreen.removeChild(offScreen.firstChild);
     },
     addDiagram(position, offset, width, height) {
       let x = offset.x,