diff --git a/examples/export-pdf.html b/examples/export-pdf.html
index c335d609a1..00269ff4dc 100644
--- a/examples/export-pdf.html
+++ b/examples/export-pdf.html
@@ -7,6 +7,7 @@ docs: >
 tags: "export, pdf, openstreetmap"
 resources:
   - 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="span12">
diff --git a/examples/export-pdf.js b/examples/export-pdf.js
index f4dd040ee4..aba978d71b 100644
--- a/examples/export-pdf.js
+++ b/examples/export-pdf.js
@@ -56,17 +56,17 @@ exportButton.addEventListener('click', function() {
   const size = map.getSize();
   const extent = map.getView().calculateExtent(size);
 
-  map.once('rendercomplete', function(event) {
-    const canvas = event.context.canvas;
-    const data = canvas.toDataURL('image/jpeg');
-    const pdf = new jsPDF('landscape', undefined, format);
-    pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
-    pdf.save('map.pdf');
-    // Reset original map size
-    map.setSize(size);
-    map.getView().fit(extent, {size});
-    exportButton.disabled = false;
-    document.body.style.cursor = 'auto';
+  map.once('rendercomplete', function() {
+    domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
+      const pdf = new jsPDF('landscape', undefined, format);
+      pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
+      pdf.save('map.pdf');
+      // Reset original map size
+      map.setSize(size);
+      map.getView().fit(extent, {size});
+      exportButton.disabled = false;
+      document.body.style.cursor = 'auto';
+    });
   });
 
   // Set print size