Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 1874:bad32adafef2 dev-pdf-generation

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add real pdf generation with jspdf * Add jspdf dependency. * Change Pdftool to not deliver the fixed pdfs, but to try to generate a plain pdf. This has just the map for now and only works, if the external servers rightfully send a well formed 'Access-Control-Allow-Origin' header.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 20 Dec 2018 15:06:38 +0100
parents ca48145dba9c
children e53924abb4a2
comparison
equal deleted inserted replaced
1644:eadf84bb0e98 1874:bad32adafef2
72 * Author(s): 72 * Author(s):
73 * * Markus Kottländer <markus.kottlaender@intevation.de> 73 * * Markus Kottländer <markus.kottlaender@intevation.de>
74 * * Bernhard E. Reiter <bernhard@intevation.de> 74 * * Bernhard E. Reiter <bernhard@intevation.de>
75 */ 75 */
76 import { mapState } from "vuex"; 76 import { mapState } from "vuex";
77 import jsPDF from "jspdf";
77 78
78 var paperSizes = { 79 var paperSizes = {
79 // in millimeter, landscape [width, height] 80 // in millimeter, landscape [width, height]
80 a3: [420, 297], 81 a3: [420, 297],
81 a4: [297, 210] 82 a4: [297, 210]
91 downloadType: "download" 92 downloadType: "download"
92 } 93 }
93 }; 94 };
94 }, 95 },
95 computed: { 96 computed: {
97 ...mapState("map", ["openLayersMap"]),
96 ...mapState("application", ["showPdfTool"]), 98 ...mapState("application", ["showPdfTool"]),
97 ...mapState("bottlenecks", ["selectedSurvey"]) 99 ...mapState("bottlenecks", ["selectedSurvey"])
98 }, 100 },
99 methods: { 101 methods: {
100 download() { 102 download() {
103 // FUTURE: disable button while working on it
101 console.log( 104 console.log(
102 "will generate pdf with", 105 "will generate pdf with",
103 this.form.paperSize, 106 this.form.paperSize,
104 this.form.format 107 this.form.format
105 ); 108 );
106 109
107 let width, height; 110 var width, height;
108 // generate PDF and open it 111 // generate PDF and open it
109 if (this.form.format !== "portrait") { 112 if (this.form.format !== "portrait") {
110 // landscape, default 113 // landscape, default
111 width = paperSizes[this.form.paperSize][0]; 114 width = paperSizes[this.form.paperSize][0];
112 height = paperSizes[this.form.paperSize][1]; 115 height = paperSizes[this.form.paperSize][1];
113 } else { 116 } else {
114 // switch width and height 117 // switch width and height
115 width = paperSizes[this.form.paperSize][1]; 118 width = paperSizes[this.form.paperSize][1];
116 height = paperSizes[this.form.paperSize][0]; 119 height = paperSizes[this.form.paperSize][0];
117 } 120 }
121
122 let resolution = 120; // Dots per inch. An inch is 25.4 mm.
123
124 // FUTURE: consider margins
118 console.log(width, height); 125 console.log(width, height);
119 126
127 var map = this.openLayersMap;
128 var mapSize = map.getSize(); // size in pixels of the map in the DOM
129
130 // Calculate the extent for the current view state and the passed size.
131 // The size is the pixel dimensions of the box into which the calculated
132 // extent should fit.
133 var mapExtent = map.getView().calculateExtent(mapSize);
134
135 var pdf = new jsPDF(this.form.format, "mm", this.form.paperSize);
136
137 // set a callback for after the next complete rendering of the map
138 map.once("rendercomplete", function(event) {
139 let canvas = event.context.canvas;
140 console.log("rendered", canvas);
141 var data = canvas.toDataURL("image/png");
142 pdf.addImage(data, "PNG", 0, 0, width, height);
143
144 pdf.save("map.pdf");
145
146 // reset to original size
147 map.setSize(mapSize);
148 map.getView().fit(mapExtent, { size: mapSize });
149
150 // FUTURE: re-enable button when done
151 });
152
153 // trigger rendering
154 var mapSizeForPrint = [
155 Math.round((width * resolution) / 25.4),
156 Math.round((height * resolution) / 25.4)
157 ];
158 map.setSize(mapSizeForPrint);
159 map.getView().fit(mapExtent, { size: mapSizeForPrint });
160
120 // TODO: replace this src with an API reponse after actually generating PDFs 161 // TODO: replace this src with an API reponse after actually generating PDFs
162 /*
121 let src = 163 let src =
122 this.form.format === "landscape" 164 this.form.format === "landscape"
123 ? "/img/PrintTemplate-Var2-Landscape.pdf" 165 ? "/img/PrintTemplate-Var2-Landscape.pdf"
124 : "/img/PrintTemplate-Var2-Portrait.pdf"; 166 : "/img/PrintTemplate-Var2-Portrait.pdf";
125 167
131 else a.target = "_blank"; 173 else a.target = "_blank";
132 174
133 document.body.appendChild(a); 175 document.body.appendChild(a);
134 a.click(); 176 a.click();
135 document.body.removeChild(a); 177 document.body.removeChild(a);
178 */
136 } 179 }
137 } 180 }
138 }; 181 };
139 </script> 182 </script>