Mercurial > gemma
comparison client/src/components/Pdftool.vue @ 2205:59c21dee6315 pdf-export
pdf-gen: improve pdftool to use value from template
* change download function to check the commig values for template
* old coordinates are still used , improve it to get them from template is still needed
#: src/components/Logs.vue:25
msgid "Accesslog"
msgstr "Zugriffs-Protokoll"
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 05 Feb 2019 16:33:01 +0100 |
parents | af136b1a854e |
children | da902f0dac88 |
comparison
equal
deleted
inserted
replaced
2124:af136b1a854e | 2205:59c21dee6315 |
---|---|
144 name: "Template 1", | 144 name: "Template 1", |
145 properties: { | 145 properties: { |
146 format: "landscape", | 146 format: "landscape", |
147 resolution: "80", | 147 resolution: "80", |
148 paperSize: "a4" | 148 paperSize: "a4" |
149 } | 149 }, |
150 elements: [ | |
151 { | |
152 type: "docinfo", | |
153 x_coordinate: 0, | |
154 y_coordinate: 0, | |
155 elementWidth: 118, | |
156 elementHeight: 8 | |
157 }, | |
158 { | |
159 type: "image", | |
160 imageType: "PNG", | |
161 imageUrl: "", | |
162 x_coordinate: 30, | |
163 y_coordinate: 297, | |
164 imageWidth: 50, | |
165 imageHeight: 23 | |
166 }, | |
167 { | |
168 type: "scalebar", | |
169 //x_coordinate:, | |
170 y_coordinate: 204 | |
171 //elementsize: 50 | |
172 }, | |
173 { | |
174 type: "textbox", | |
175 x_coordinate: 50, | |
176 y_coordinate: 190, | |
177 elementSize: 8, | |
178 text: "textfrom template", | |
179 color: "black" | |
180 }, | |
181 { | |
182 type: "aboutbox" | |
183 //x_coordinate: 0, | |
184 //y_coordinate: 210 - 20 | |
185 } | |
186 ] | |
150 }, | 187 }, |
151 { | 188 { |
152 name: "Template 2", | 189 name: "Template 2", |
153 properties: { | 190 properties: { |
154 format: "portrait", | 191 format: "portrait", |
155 resolution: "120", | 192 resolution: "120", |
156 paperSize: "a3" | 193 paperSize: "a3" |
157 } | 194 }, |
195 elements: [ | |
196 { | |
197 type: "image", | |
198 imageType: "PNG", | |
199 imageUrl: "", | |
200 x_coordinate: 30, | |
201 y_coordinate: 297, | |
202 imageWidth: 50, | |
203 imageHeight: 23 | |
204 }, | |
205 { | |
206 type: "scalebar", | |
207 //x_coordinate: 250, | |
208 y_coordinate: 420 - 6 | |
209 //elementsize: 50 | |
210 }, | |
211 { | |
212 type: "textbox", | |
213 x_coordinate: 50, | |
214 y_coordinate: 50, | |
215 elementSize: 22, | |
216 text: "from template", | |
217 color: "black" | |
218 }, | |
219 { | |
220 type: "docinfo", | |
221 x_coordinate: 0, | |
222 y_coordinate: 0, | |
223 elementWidth: 118, | |
224 elementHeight: 8 | |
225 }, | |
226 { | |
227 type: "aboutbox" | |
228 //x_coordinate: 0, | |
229 //y_coordinate: 210 - 20 | |
230 } | |
231 ] | |
158 } | 232 } |
159 ], | 233 ], |
160 logoImageForPDF: null, // a HTMLImageElement instance | 234 logoImageForPDF: null, // a HTMLImageElement instance |
161 readyToGenerate: true // if the user is allowed to press the button | 235 readyToGenerate: true // if the user is allowed to press the button |
162 }; | 236 }; |
192 this.form.template = t.name; | 266 this.form.template = t.name; |
193 } | 267 } |
194 }); | 268 }); |
195 }, | 269 }, |
196 download() { | 270 download() { |
271 let template = this.templates.find(t => t.name === this.form.template); | |
197 // disable button while working on it | 272 // disable button while working on it |
198 this.readyToGenerate = false; | 273 this.readyToGenerate = false; |
199 | 274 |
200 console.log( | 275 console.log( |
201 "will generate pdf with", | 276 "will generate pdf with", |
264 ); | 339 ); |
265 console.log("scaleNominator = ", scaleNominator); | 340 console.log("scaleNominator = ", scaleNominator); |
266 | 341 |
267 var data = canvas.toDataURL("image/jpeg"); | 342 var data = canvas.toDataURL("image/jpeg"); |
268 pdf.addImage(data, "JPEG", 0, 0, width, height); | 343 pdf.addImage(data, "JPEG", 0, 0, width, height); |
269 self.addScaleBar(pdf, width, height, scaleNominator); | 344 //self.addScaleBar(pdf, width, height, scaleNominator); |
270 self.addNorthArrow(pdf, 15, 9, northarrowSize); | 345 self.addNorthArrow(pdf, 15, 9, northarrowSize); |
271 self.addPageInfo(pdf); | 346 //self.addPageInfo(pdf); |
272 self.addAboutBox(pdf, width, height); | 347 //self.addAboutBox(pdf, width, height); |
273 | 348 |
274 if (self.getLayerByName("Bottleneck isolines").isVisible) { | 349 if (self.getLayerByName("Bottleneck isolines").isVisible) { |
275 self.addLegend(pdf, width, height); | 350 self.addLegend(pdf, width, height); |
276 } | 351 } |
277 | 352 if (template) { |
278 pdf.save("map.pdf"); | 353 template.elements.forEach(t => { |
354 switch (t.type) { | |
355 case "image": { | |
356 console.log("autobox from template"); | |
357 if (t.imageUrl.length > 0) { | |
358 pdf.addImage( | |
359 t.imageUrl, | |
360 t.imageType, | |
361 t.x_coordinate, | |
362 t.y_coordinate, | |
363 t.imageWidth, | |
364 t.imageHeight | |
365 ); | |
366 } | |
367 break; | |
368 } | |
369 case "scalebar": { | |
370 self.addScaleBar( | |
371 pdf, | |
372 width, | |
373 height, | |
374 scaleNominator, | |
375 t.y_coordinate | |
376 ); | |
377 break; | |
378 } | |
379 case "textbox": { | |
380 self.addText( | |
381 pdf, | |
382 t.x_coordinate, | |
383 t.y_coordinate, | |
384 t.elementSize, | |
385 t.color, | |
386 100, | |
387 t.text | |
388 ); | |
389 break; | |
390 } | |
391 case "docinfo": { | |
392 self.addPageInfo(pdf); | |
393 break; | |
394 } | |
395 case "aboutbox": { | |
396 self.addAboutBox(pdf, width, height); | |
397 break; | |
398 } | |
399 /* case "docinfo": { | |
400 self.addAboutBox( | |
401 pdf, | |
402 t.x_coordinate, | |
403 t.y_coordinate, | |
404 t.elementWidth, | |
405 t.elementHeight | |
406 ); | |
407 } */ | |
408 } | |
409 }); | |
410 | |
411 pdf.save("map.pdf"); | |
412 } else { | |
413 self.addScaleBar(pdf, width, height, scaleNominator, 204); | |
414 self.addPageInfo(pdf); | |
415 self.addAboutBox(pdf, width, height); | |
416 pdf.save("map.pdf"); | |
417 } | |
279 // reset to original size | 418 // reset to original size |
280 map.setSize(mapSize); | 419 map.setSize(mapSize); |
281 map.getView().fit(mapExtent, { size: mapSize }); | 420 map.getView().fit(mapExtent, { size: mapSize }); |
282 | 421 |
283 // as we are done: re-enable button | 422 // as we are done: re-enable button |
322 // using jsPDF units | 461 // using jsPDF units |
323 doc.setDrawColor(255, 255, 255); | 462 doc.setDrawColor(255, 255, 255); |
324 doc.setFillColor(255, 255, 255); | 463 doc.setFillColor(255, 255, 255); |
325 doc.roundedRect(x, y, w, h, 3, 3, "FD"); | 464 doc.roundedRect(x, y, w, h, 3, 3, "FD"); |
326 }, | 465 }, |
327 addScaleBar(doc, docWidth, docHeight, scaleNominator) { | 466 addScaleBar(doc, docWidth, docHeight, scaleNominator, y) { |
328 // scaleNominator is the x in 1:x of the map scale | 467 // scaleNominator is the x in 1:x of the map scale |
329 | 468 |
330 // hardcode maximal width for now and place in lower right corner | 469 // hardcode maximal width for now and place in lower right corner |
331 let maxWidth = 80; // in mm | 470 let maxWidth = 80; // in mm |
332 | 471 |
351 if (maxLength >= 1e7) { | 490 if (maxLength >= 1e7) { |
352 // >= 10 km | 491 // >= 10 km |
353 unit = "km"; | 492 unit = "km"; |
354 unitConversionFactor = 1e6; | 493 unitConversionFactor = 1e6; |
355 } else if (maxLength >= 1e4) { | 494 } else if (maxLength >= 1e4) { |
356 // >= 10 m | 495 // >= 10 m) |
357 unit = "m"; | 496 unit = "m"; |
358 unitConversionFactor = 1e3; | 497 unitConversionFactor = 1e3; |
359 } | 498 } |
360 | 499 |
361 maxLength /= unitConversionFactor; | 500 maxLength /= unitConversionFactor; |
382 } | 521 } |
383 | 522 |
384 let size = (length * unitConversionFactor) / scaleNominator / 4; | 523 let size = (length * unitConversionFactor) / scaleNominator / 4; |
385 | 524 |
386 let x = docWidth - (size * 4 + 8); | 525 let x = docWidth - (size * 4 + 8); |
387 let y = docHeight - 6; | 526 //let y = docHeight - 6; |
388 | 527 |
389 this.addRoundedBox(doc, x - 4, y - 4, size * 4 + 12, 10); | 528 this.addRoundedBox(doc, x - 4, y - 4, size * 4 + 12, 10); |
390 | 529 |
391 doc.setDrawColor(0, 0, 0); | 530 doc.setDrawColor(0, 0, 0); |
392 doc.setFillColor(0, 0, 0); | 531 doc.setFillColor(0, 0, 0); |