Merge branch '277-bug-export-comparison-as-pdf-is-broken' into 'master'

fix(Comparison): fix export comparison as PDF Closes #277 See merge request TIBHannover/orkg/orkg-frontend!1072
TIBHannover · Apr 4, 2023 · 3524b73 · 3524b73
2 parents 314c67b + df24d00
commit 3524b73
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
         "@jonkoops/matomo-tracker-react": "^0.7.0",
         "@reduxjs/toolkit": "^1.9.0",
         "@tippyjs/react": "^4.2.6",
-        "@trainiac/html2canvas": "^1.0.0",
         "@webscopeio/react-textarea-autocomplete": "^4.9.2",
         "@xobotyi/scrollbar-width": "^1.9.5",
         "array-move": "^3.0.1",
@@ -32,6 +31,7 @@
         "greeting-time": "^1.0.0",
         "handsontable": "^11.0.1",
         "he": "^1.2.0",
+        "html2canvas": "^1.4.1",
         "immutability-helper": "^3.0.2",
         "indefinite": "^2.4.2",
         "intro.js": "^6.0.0",

diff --git a/src/components/Comparison/Export/GeneratePdf.js b/src/components/Comparison/Export/GeneratePdf.js
@@ -1,5 +1,6 @@
-import html2canvas from '@trainiac/html2canvas';
+import html2canvas from 'html2canvas';
 import { DropdownItem } from 'reactstrap';
+import { sumBy } from 'lodash';
 import PropTypes from 'prop-types';
 
 // FIXME: svg icons look ugly while exporting, so hide them before generating the PDF
@@ -10,8 +11,8 @@ const GeneratePdf = props => {
         const header = document.getElementById(props.id).getElementsByClassName('header')[0];
         const headerHeightMm = header.offsetHeight;
         const headerWidthMm = header.offsetWidth;
-        let body = document.getElementById(props.id).getElementsByClassName('comparisonBody')[0];
-        const bodyHeightMm = body.offsetHeight;
+        const allRows = Array.from(document.getElementById(props.id).getElementsByClassName('comparisonRow'));
+        const bodyHeightMm = sumBy(allRows, 'offsetHeight');
 
         // Header
         const canvasHeader = await html2canvas(header);
@@ -27,11 +28,13 @@ const GeneratePdf = props => {
         pdf.addImage(imgData, 'PNG', 5, 5);
 
         // Body
-        // There is issue (Unable to find element in cloned iframe) if we don't select the body again!
-        body = document.getElementById(props.id).getElementsByClassName('comparisonBody')[0];
-        const canvas = await html2canvas(body);
-        const imgData2 = canvas.toDataURL('image/png');
-        pdf.addImage(imgData2, 'PNG', 5, headerHeightMm + 5);
+        const promises = allRows.map(row => html2canvas(row));
+        const allCanvasRows = await Promise.all(promises);
+        allCanvasRows.map((can, i) => {
+            const imgData2 = can.toDataURL('image/png');
+            return pdf.addImage(imgData2, 'PNG', 5, headerHeightMm + sumBy(allRows.slice(0, i), 'offsetHeight'));
+        });
+
         pdf.save('ORKG Comparison exported.pdf');
     };
 

diff --git a/src/components/Comparison/Table/Rows/Row.js b/src/components/Comparison/Table/Rows/Row.js
@@ -11,7 +11,7 @@ const Row = ({ row, index }) => {
         <Draggable draggableId={row.id} key={row.getRowProps().key} index={index} isDragDisabled={!isEditing}>
             {providedDraggable => (
                 <div
-                    className="tr p-0"
+                    className="comparisonRow tr p-0"
                     ref={providedDraggable.innerRef}
                     {...providedDraggable.draggableProps}
                     style={{

diff --git a/src/components/Comparison/Table/Rows/Rows.js b/src/components/Comparison/Table/Rows/Rows.js
@@ -67,12 +67,7 @@ const Rows = ({ rows, scrollContainerBody, getTableBodyProps, prepareRow }) => {
                     )}
                 >
                     {providedDroppable => (
-                        <div
-                            ref={providedDroppable.innerRef}
-                            {...getTableBodyProps()}
-                            className="comparisonBody"
-                            {...providedDroppable.droppableProps}
-                        >
+                        <div ref={providedDroppable.innerRef} {...getTableBodyProps()} {...providedDroppable.droppableProps}>
                             {rows.map((row, index) => {
                                 prepareRow(row);
                                 return <Row row={row} index={index} key={row.getRowProps().key} />;

diff --git a/src/components/Comparison/styled.js b/src/components/Comparison/styled.js
@@ -145,7 +145,7 @@ export const ReactTableWrapper = styled.div`
             }
         }
 
-        .comparisonBody .tr:last-child .td > div > div:first-child {
+        .comparisonRow .tr:last-child .td > div > div:first-child {
             // border-radius: 0 0 0 ${props => props.theme.borderRadius} !important;
         }
 
@@ -158,7 +158,7 @@ export const ReactTableWrapper = styled.div`
                 }
             }
 
-            .comparisonBody {
+            .comparisonRow {
                 position: relative;
                 z-index: 0;
             }

diff --git a/src/components/ContributionEditor/EditorTable.js b/src/components/ContributionEditor/EditorTable.js
@@ -58,7 +58,7 @@ const EditorTable = ({ scrollContainerBody }) => {
                 <ScrollSyncPane group="one">
                     {/* paddingBottom for the 'add value' bottom, which is positioned partially below the table */}
                     <div ref={scrollContainerBody} style={{ overflow: 'auto', paddingBottom: 15 }}>
-                        <div {...getTableBodyProps()} className="comparisonBody" style={{ ...getTableProps().style }}>
+                        <div {...getTableBodyProps()} className="comparisonRow" style={{ ...getTableProps().style }}>
                             <FlipMove duration={700} enterAnimation="accordionVertical" leaveAnimation="accordionVertical" className="p-0">
                                 {rows.map(row => {
                                     prepareRow(row);