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);