diff --git a/package-lock.json b/package-lock.json index 018de7a7..d8006bac 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz", - "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==", - "optional": true, + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz", + "integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==", "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==", - "optional": true + "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==" }, "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", - "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz", - "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==", - "optional": true, + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.1.4.tgz", + "integrity": "sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==", "requires": { "css-line-break": "1.1.1" } diff --git a/package.json b/package.json index 1e593505..0546da98 100644 --- a/package.json +++ b/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", diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js index 3d75c42c..e2241522 100644 --- a/src/svgcanvas/svg-exec.js +++ b/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 - - // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable) - const doc = jsPDF({ - orientation, - unit, - format: [ res.w, res.h ] - // , compressPdf: true - }); - const docTitle = svgCanvas.getDocumentTitle(); - doc.setProperties({ - title: docTitle /* , - subject: '', - author: '', - keywords: '', - creator: '' */ - }); - 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; + const iframe = document.createElement('iframe'); + iframe.onload = function() { + const iframedoc=iframe.contentDocument||iframe.contentWindow.document; + const ele = svgContext_.getSVGContent(); + 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 ] + }); + const docTitle = svgCanvas.getDocumentTitle(); + doc.setProperties({ + title: docTitle + }); + doc.addImage(imgData, 'PNG', 0, 0, res.w, res.h); + iframe.parentNode.removeChild(iframe); + const { issues, issueCodes } = getIssues(); + 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.