Mercurial > gemma
changeset 3796:243316850889 yworks-svg2pdf
client: improve pdf generation
* Move general template interpretation code from Waterlevel.vue to
lib/mixins.js. This is the first step to remove code redundancy
as this code is similiar in four other places.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 04 Jul 2019 09:16:10 +0200 |
parents | b330e014c655 |
children | 20c1ac8ab8a2 |
files | client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 124 insertions(+), 112 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Jul 04 08:33:12 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Jul 04 09:16:10 2019 +0200 @@ -109,7 +109,6 @@ import { lineChunked } from "d3-line-chunked"; import { endOfDay } from "date-fns"; import debounce from "debounce"; -import jsPDF from "jspdf-yworks"; import svg2pdf from "svg2pdf.js"; import { saveAs } from "file-saver"; import { pdfgen } from "@/lib/mixins"; @@ -250,116 +249,24 @@ saveAs(blog, filename); }, downloadPDF() { - 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; - // check the template elements - if (this.templateData) { - 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); - break; - } - case "diagramlegend": { - this.addDiagramLegend( - e.position, - e.offset || defaultOffset, - e.color || defaultColor - ); - break; - } - case "diagramtitle": { - let gaugeInfo = - this.selectedGauge.properties.objname + - " (" + - this.selectedGauge.id - .split(".")[1] - .replace(/[()]/g, "") - .split(",")[3] + - "):" + - " Waterlevel " + - this.dateFrom.toLocaleDateString() + - " - " + - this.dateTo.toLocaleDateString(); - this.addDiagramTitle( - e.position, - e.offset || defaultOffset, - e.fontsize || defaultFontSize, - e.color || defaultColor, - gaugeInfo - ); - break; - } - case "text": { - this.addText( - e.position, - e.offset || defaultOffset, - e.width || defaultWidth, - e.fontsize || defaultFontSize, - e.color || defaultTextColor, - e.text || "" - ); - break; - } - case "image": { - this.addImage( - e.url, - e.format || "", - e.position, - e.offset || defaultOffset, - e.width || 90, - e.height || 60 - ); - 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 - ); - 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; - } - } - }); - } + let gaugeInfo = + this.selectedGauge.properties.objname + + " (" + + this.selectedGauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(",")[3] + + "):" + + " Waterlevel " + + this.dateFrom.toLocaleDateString() + + " - " + + this.dateTo.toLocaleDateString(); + + this.generatePDF({ + templateData: this.templateData, + diagramTitle: gaugeInfo + }); + this.pdf.doc.save( this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf" );
--- a/client/src/lib/mixins.js Thu Jul 04 08:33:12 2019 +0200 +++ b/client/src/lib/mixins.js Thu Jul 04 09:16:10 2019 +0200 @@ -13,8 +13,10 @@ * * Fadi Abbud <fadi.abbud@intevation.de> * * Bernhard Reiter <bernhard.reiter@intevation.de> */ +import jsPDF from "jspdf-yworks"; import locale2 from "locale2"; import { mapState } from "vuex"; + export const sortTable = { data() { return { @@ -68,7 +70,110 @@ ...mapState("user", ["user"]) }, methods: { - // add text at specific coordinates and determine how many wrolds in a single line + generatePDF(params) { + // creates a new jsPDF object into this.pdf.doc + let templateData = params["templateData"]; + let diagramTitle = params["diagramTitle"]; + + this.pdf.doc = new jsPDF( + "l", + "mm", + 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; + // check the template elements + if (templateData) { + let defaultFontSize = 11, + defaultColor = "black", + defaultWidth = 70, + defaultTextColor = "black", + defaultBorderColor = "white", + defaultBgColor = "white", + defaultRounding = 2, + defaultPadding = 2, + defaultOffset = { x: 0, y: 0 }; + templateData.elements.forEach(e => { + switch (e.type) { + case "diagram": { + this.addDiagram(e.position, e.offset || defaultOffset); + break; + } + case "diagramlegend": { + this.addDiagramLegend( + e.position, + e.offset || defaultOffset, + e.color || defaultColor + ); + break; + } + case "diagramtitle": { + this.addDiagramTitle( + e.position, + e.offset || defaultOffset, + e.fontsize || defaultFontSize, + e.color || defaultColor, + diagramTitle + ); + break; + } + case "text": { + this.addText( + e.position, + e.offset || defaultOffset, + e.width || defaultWidth, + e.fontsize || defaultFontSize, + e.color || defaultTextColor, + e.text || "" + ); + break; + } + case "image": { + this.addImage( + e.url, + e.format || "", + e.position, + e.offset || defaultOffset, + e.width || 90, + e.height || 60 + ); + 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 + ); + 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; + } + } + }); + } + }, + + // add text at specific coordinates and do line breaks addText(position, offset, width, fontSize, color, text) { text = this.replacePlaceholders(text); // split the incoming string to an array, each element is a string of