Mercurial > gemma
changeset 3798:e008197e2215 yworks-svg2pdf
client: improve pdf generation
* Use generatePDF() from HydrologicalConditions.vue to unify code.
* Split out formatting of gaugeInfo, used from Waterlevel.vue
and HydrologicalConditions.vue.
* Make paper width and size setting in generatePDF() more readable
by grouping the conditions more logically.
| author | Bernhard Reiter <bernhard@intevation.de> |
|---|---|
| date | Thu, 04 Jul 2019 10:15:46 +0200 |
| parents | 20c1ac8ab8a2 |
| children | f4deb4aae485 |
| files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
| diffstat | 3 files changed, 32 insertions(+), 125 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu Jul 04 10:12:19 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Jul 04 10:15:46 2019 +0200 @@ -108,7 +108,6 @@ import * as d3 from "d3"; import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; -import jsPDF from "jspdf-yworks"; import canvg from "canvg"; import { pdfgen } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; @@ -237,119 +236,16 @@ ); }, downloadPDF() { - if (this.templateData) { - this.pdf.doc = new jsPDF( - "l", - "mm", - this.templateData.properties.paperSize - ); - // pdf width and height in millimeter (landscape) - this.pdf.width = - this.templateData.properties.paperSize === "a3" ? 420 : 297; - this.pdf.height = - this.templateData.properties.paperSize === "a3" ? 297 : 210; - // default values if some are missing in template - let defaultFontSize = 11, - defaultColor = "black", - defaultWidth = 70, - defaultTextColor = "black", - defaultBorderColor = "white", - defaultBgColor = "white", - defaultRounding = 2, - defaultPadding = 2, - defaultOffset = { x: 0, y: 0 }; - this.templateData.elements.forEach(e => { - switch (e.type) { - case "diagram": { - this.addDiagram( - e.position, - e.offset || defaultOffset, - e.width, - e.height - ); - break; - } - case "diagramtitle": { - let gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "): Hydrological Conditions " + - this.longtermInterval.join(" - "); - this.addDiagramTitle( - e.position, - e.offset || defaultOffset, - e.fontsize || defaultFontSize, - e.color || defaultColor, - gaugeInfo - ); - break; - } - case "diagramlegend": { - this.addDiagramLegend( - e.position, - e.offset || defaultOffset, - e.color || defaultColor - ); - break; - } - case "image": { - this.addImage( - e.url, - e.format || "", - e.position, - e.offset || defaultOffset, - e.width || 90, - e.height || 60 - ); - break; - } - case "text": { - this.addText( - e.position, - e.offset || defaultOffset, - e.width || defaultWidth, - e.fontsize || defaultFontSize, - e.color || defaultTextColor, - e.text || "" - ); - break; - } - case "box": { - this.addBox( - e.position, - e.offset || defaultOffset, - e.width || 90, - e.height || 60, - e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, - e.color || defaultBgColor, - e.brcolor || defaultBorderColor - ); + let diagramTitle = + this.gaugeInfo(this.selectedGauge) + + ": Hydrological Conditions " + + this.longtermInterval.join(" - "); - break; - } - case "textbox": { - this.addTextBox( - e.position, - e.offset || defaultOffset, - e.width, - e.height, - e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, - e.padding || defaultPadding, - e.fontsize || defaultFontSize, - e.color || defaultTextColor, - e.background || defaultBgColor, - e.text || "", - e.brcolor || defaultBorderColor - ); - break; - } - } - }); - } + this.generatePDF({ + templateData: this.templateData, + diagramTitle: diagramTitle + }); + this.pdf.doc.save( this.selectedGauge.properties.objname + " Hydrological-condition Diagram.pdf"
--- a/client/src/components/gauge/Waterlevel.vue Thu Jul 04 10:12:19 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Jul 04 10:15:46 2019 +0200 @@ -249,22 +249,16 @@ saveAs(blog, filename); }, downloadPDF() { - let gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "):" + - " Waterlevel " + + let diagramTitle = + this.gaugeInfo(this.selectedGauge) + + ": Waterlevel " + this.dateFrom.toLocaleDateString() + " - " + this.dateTo.toLocaleDateString(); this.generatePDF({ templateData: this.templateData, - diagramTitle: gaugeInfo + diagramTitle: diagramTitle }); this.pdf.doc.save(
--- a/client/src/lib/mixins.js Thu Jul 04 10:12:19 2019 +0200 +++ b/client/src/lib/mixins.js Thu Jul 04 10:15:46 2019 +0200 @@ -70,6 +70,18 @@ ...mapState("user", ["user"]) }, methods: { + gaugeInfo(selectedGauge) { + // returns string with formatted gauge info + return ( + selectedGauge.properties.objname + + " (" + + selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + ")" + ); + }, generatePDF(params) { // creates a new jsPDF object into this.pdf.doc let templateData = params["templateData"]; @@ -81,8 +93,13 @@ this.templateData.properties.paperSize ); // pdf width and height in millimeter (landscape) - this.pdf.width = templateData.properties.paperSize === "a3" ? 420 : 297; - this.pdf.height = templateData.properties.paperSize === "a4" ? 297 : 210; + if (templateData.properties.paperSize === "a3") { + this.pdf.width = 420; + this.pdf.height = 297; + } else { + this.pdf.width = 297; + this.pdf.height = 210; + } // check the template elements if (templateData) { let defaultFontSize = 11,