#316 pdf export changes

package-lock.json

@@ -13,6 +13,7 @@
         "canvg": "3.0.7",
         "core-js": "3.14.0",
         "elix": "15.0.0",
+        "html2canvas": "^1.1.4",
         "i18next": "20.3.1",
         "jspdf": "2.3.1",
         "pathseg": "1.2.0",
@@ -6500,7 +6501,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
       "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
-      "optional": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -8525,7 +8525,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
       "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
-      "optional": true,
       "dependencies": {
         "base64-arraybuffer": "^0.2.0"
       }
@@ -12929,10 +12928,9 @@
       "dev": true
     },
     "node_modules/html2canvas": {
-      "version": "1.0.0-rc.7",
+      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz",
-      "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
+      "integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==",
-      "optional": true,
       "dependencies": {
         "css-line-break": "1.1.1"
       },
@@ -29950,8 +29948,7 @@
     "base64-arraybuffer": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
-      "optional": true
     },
     "base64-js": {
       "version": "1.3.1",
@@ -31635,7 +31632,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
       "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
-      "optional": true,
       "requires": {
         "base64-arraybuffer": "^0.2.0"
       }
@@ -35184,10 +35180,9 @@
       "dev": true
     },
     "html2canvas": {
-      "version": "1.0.0-rc.7",
+      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz",
-      "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
+      "integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==",
-      "optional": true,
       "requires": {
         "css-line-break": "1.1.1"
       }

package.json

@@ -97,6 +97,7 @@
     "canvg": "3.0.7",
     "core-js": "3.14.0",
     "elix": "15.0.0",
+    "html2canvas": "^1.1.4",
     "i18next": "20.3.1",
     "jspdf": "2.3.1",
     "pathseg": "1.2.0",

src/svgcanvas/svg-exec.js

@@ -7,6 +7,7 @@
 
 import { jsPDF } from 'jspdf/dist/jspdf.es.min.js';
 import 'svg2pdf.js/dist/svg2pdf.es.js';
+import html2canvas from 'html2canvas';
 import * as hstry from './history.js';
 import {
   text2xml, cleanupElement, findDefs, getHref, preventClickDefault,
@@ -863,36 +864,37 @@ export const exportPDF = async (
   const res = svgCanvas.getResolution();
   const orientation = res.w > res.h ? 'landscape' : 'portrait';
   const unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
-
+  const iframe = document.createElement('iframe');
-  // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
+  iframe.onload = function() {
-  const doc = jsPDF({
+    const iframedoc=iframe.contentDocument||iframe.contentWindow.document;
-    orientation,
+    const ele = svgContext_.getSVGContent();
-    unit,
+    const cln = ele.cloneNode(true);
+    iframedoc.body.appendChild(cln);
+    setTimeout(function(){
+      // eslint-disable-next-line promise/catch-or-return
+      html2canvas(iframedoc.body, { useCORS: true, allowTaint: true }).then((canvas) => {
+        const imgData = canvas.toDataURL('image/png');
+        const doc = new jsPDF({
+          orientation: orientation,
+          unit: unit,
           format: [ res.w, res.h ]
-    // , compressPdf: true
         });
         const docTitle = svgCanvas.getDocumentTitle();
         doc.setProperties({
-    title: docTitle /* ,
+          title: docTitle
-    subject: '',
-    author: '',
-    keywords: '',
-    creator: '' */
         });
+        doc.addImage(imgData, 'PNG', 0, 0, res.w, res.h);
+        iframe.parentNode.removeChild(iframe);
         const { issues, issueCodes } = getIssues();
-  // const svg = this.svgCanvasToString();
-  // await doc.addSvgAsImage(svg)
-  await doc.svg(svgContext_.getSVGContent(), { x: 0, y: 0, width: res.w, height: res.h });
-
-  // doc.output('save'); // Works to open in a new
-  //  window; todo: configure this and other export
-  //  options to optionally work in this manner as
-  //  opposed to opening a new tab
         outputType = outputType || 'dataurlstring';
         const obj = { issues, issueCodes, exportWindowName, outputType };
         obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);
         svgContext_.call('exportedPDF', obj);
         return obj;
+      });
+    }, 1000);
+  };
+  document.body.appendChild(iframe);
 };
 /**
 * Ensure each element has a unique ID.