Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 3032:3aca036e11f1
client: improve pdf properties for diagrams
* adjust the papersize,unit and format of the pdf
* specify the size of the exported diagram on pdf
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 13:34:18 +0200 |
parents | fe88a9b151ca |
children | 44dc837638d9 |
comparison
equal
deleted
inserted
replaced
3031:f99f0cbb843f | 3032:3aca036e11f1 |
---|---|
183 var svg = this.$refs.diagramContainer.innerHTML; | 183 var svg = this.$refs.diagramContainer.innerHTML; |
184 console.log(this.svg); | 184 console.log(this.svg); |
185 if (svg) { | 185 if (svg) { |
186 svg = svg.replace(/\r?\n|\r/g, "").trim(); | 186 svg = svg.replace(/\r?\n|\r/g, "").trim(); |
187 } | 187 } |
188 var pdf = new jsPDF("p", "pt", "c2"); | 188 var pdf = new jsPDF("l", "mm", "a3"); |
189 var canvas = document.createElement("canvas"); | 189 var canvas = document.createElement("canvas"); |
190 canvas.width = window.innerWidth; | 190 canvas.width = window.innerWidth; |
191 canvas.height = 500; | 191 canvas.height = 500; |
192 canvg(canvas, svg, { | 192 canvg(canvas, svg, { |
193 ignoreMouse: true, | 193 ignoreMouse: true, |
194 ignoreAnimation: true, | 194 ignoreAnimation: true, |
195 ignoreDimensions: true | 195 ignoreDimensions: true |
196 }); | 196 }); |
197 var imgData = canvas.toDataURL("image/png"); | 197 var imgData = canvas.toDataURL("image/png"); |
198 pdf.addImage(imgData, "PNG", 50, 200); | 198 pdf.addImage(imgData, "PNG", 40, 60, 380, 130); |
199 pdf.save("waterlevel-Diagram.pdf"); | 199 pdf.save("waterlevel-Diagram.pdf"); |
200 }, | 200 }, |
201 drawDiagram() { | 201 drawDiagram() { |
202 // remove old diagram and exit if necessary data is missing | 202 // remove old diagram and exit if necessary data is missing |
203 d3.select(".diagram-container svg").remove(); | 203 d3.select(".diagram-container svg").remove(); |