Use dom-to-image library in export-pdf example

fixes #9100
This commit is contained in:
Frederic Junod
2019-01-07 10:35:47 +01:00
parent cf6b1ca1cc
commit d426e80c6b
2 changed files with 12 additions and 11 deletions
+1
View File
@@ -7,6 +7,7 @@ docs: >
tags: "export, pdf, openstreetmap" tags: "export, pdf, openstreetmap"
resources: resources:
- https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
- https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
--- ---
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
+11 -11
View File
@@ -56,17 +56,17 @@ exportButton.addEventListener('click', function() {
const size = map.getSize(); const size = map.getSize();
const extent = map.getView().calculateExtent(size); const extent = map.getView().calculateExtent(size);
map.once('rendercomplete', function(event) { map.once('rendercomplete', function() {
const canvas = event.context.canvas; domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
const data = canvas.toDataURL('image/jpeg'); const pdf = new jsPDF('landscape', undefined, format);
const pdf = new jsPDF('landscape', undefined, format); pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map.pdf');
pdf.save('map.pdf'); // Reset original map size
// Reset original map size map.setSize(size);
map.setSize(size); map.getView().fit(extent, {size});
map.getView().fit(extent, {size}); exportButton.disabled = false;
exportButton.disabled = false; document.body.style.cursor = 'auto';
document.body.style.cursor = 'auto'; });
}); });
// Set print size // Set print size