Merge pull request #129 from Dataport/fix/embed-exported-pdf

ludoholic · web-flow · commit a6ba12c69f54 · 2024-04-24T16:38:29.000+02:00
Fix: PDF export with download:false
diff --git a/packages/clients/snowbox/src/index.html b/packages/clients/snowbox/src/index.html
@@ -17,6 +17,7 @@
       :root {
         --not-quite-white: #f2f3f4;
         --eigengrau: #16161d;
+        --map-height: 600px;
       }
 
       * {
@@ -60,13 +61,19 @@
       .polarstern {
         width: 100vw;
         max-width: calc(100% + 64px);
-        height: 600px;
+        height: var(--map-height);
         position: relative;
         margin-top: 10px;
         margin-bottom: 10px;
         left: -32px;
         outline: solid var(--eigengrau);
       }
+
+      #vuex-target-export-result {
+        width: 100%;
+        height: var(--map-height);
+      }
+
     </style>
   </head>
   <body>
@@ -100,7 +107,7 @@ <h2>Example for programmatic information binding</h2>
     </p>
     <p>
       Map export:
-      <image id="vuex-target-export-result"></image>
+      <embed  id="vuex-target-export-result">
     </p>
     <script type="module" src="./polar-client.ts"></script>
     <script>
diff --git a/packages/plugins/Export/CHANGELOG.md b/packages/plugins/Export/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## unreleased
+
+- Fix: PDF export with download:false now works correctly.
+
 ## 1.2.0
 
 - Feature: Improved implementation to make plugin SPA-ready.
diff --git a/packages/plugins/Export/README.md b/packages/plugins/Export/README.md
@@ -30,11 +30,11 @@ map.$store.dispatch('plugin/export/exportAs', type)
 
 ### State
 
-This shows how a callback can be used to immediately show a `Png` screenshot in an image tag. The value of the `screenshot` variable is a base64-encoded string.
+This shows how a callback can be used to show the exported data in a suitable html element. The value of the `screenshot` variable is a base64-encoded string.
 
 ```js
-const someImgTag = // ... however you retrieve your tag
+const someElement = // ... however you retrieve your html element
   map.subscribe('plugin/export/exportedMap', (screenshot) =>
-    someImgTag.setAttribute('src', screenshot)
+    someElement.setAttribute('src', screenshot)
   )
 ```
diff --git a/packages/plugins/Export/src/store/actions.ts b/packages/plugins/Export/src/store/actions.ts
@@ -72,41 +72,37 @@ const actions: PolarActionTree<ExportState, ExportGetters> = {
         }
       )
 
-      const src = mapCanvas.toDataURL(
+      let src = mapCanvas.toDataURL(
         type === ExportFormat.PNG ? 'image/png' : 'image/jpeg'
       )
 
-      commit('setExportedMap', src)
-
-      if (!download) {
-        /*
-        commit(
-          'plugin/toast/addToast',
-          {
-            message: 'Your image is awesome and stored.',
-          },
-          { root: true }
-        )
-        */
-      } else if (type === ExportFormat.JPG || type === ExportFormat.PNG) {
-        const link = document.createElement('a')
-        link.download = 'map.' + (type === ExportFormat.PNG ? 'png' : 'jpeg')
-        link.href = src
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+      if (type === ExportFormat.JPG || type === ExportFormat.PNG) {
+        if (download) {
+          const link = document.createElement('a')
+          link.download = 'map.' + (type === ExportFormat.PNG ? 'png' : 'jpeg')
+          link.href = src
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+        }
       } else {
         // TODO: decide on a format, scale map accordingly
         const format = 'a4'
         const dim = dims[format]
         // Import of jspdf is in mounted.
-          const pdf = new jsPDF('landscape', undefined, format) // eslint-disable-line
+        const pdf = new jsPDF('landscape', undefined, format) // eslint-disable-line
         pdf.addImage(src, 'JPEG', 0, 0, dim[0], dim[1])
-        pdf.save('map.pdf')
         // Reset original map size
         map.setSize(size)
         map.getView().setResolution(viewResolution)
+        src = pdf.output('datauristring')
+
+        if (download) {
+          pdf.save('map.pdf')
+        }
       }
+
+      commit('setExportedMap', src)
     })
     map.renderSync()
   },
