feat: Derek/export png (#95)

* Attempting to use more lightweight version * Did not work. * This is not what I wanted * The image saves correctly. Needs padding * Padding !! * Removed downloadjs * Padding more
Longhorn-Developers · Mar 6, 2024 · 58c2b46 · 58c2b46
1 parent a30fecf
commit 58c2b46
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
         "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
+        "html-to-image": "^1.11.11",
         "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,5 +1,7 @@
 import React, { useRef } from 'react';
-import html2canvas from 'html2canvas';
+// import html2canvas from 'html2canvas';
+import * as htmlToImage from 'html-to-image';
+import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import calIcon from 'src/assets/icons/cal.svg';
@@ -38,15 +40,42 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const saveAsPNG = () => {
-        if (calendarRef.current) {
-            html2canvas(calendarRef.current).then(canvas => {
-                // Create an a element to trigger download
-                const a = document.createElement('a');
-                a.href = canvas.toDataURL('image/png');
-                a.download = 'calendar.png';
-                a.click();
-            });
-        }
+        // if (calendarRef.current) {
+        //     html2canvas(calendarRef.current).then(canvas => {
+        //         // Create an a element to trigger download
+        //         const a = document.createElement('a');
+        //         a.href = canvas.toDataURL('image/png');
+        //         a.download = 'calendar.png';
+        //         a.click();
+        //     });
+        // }
+        htmlToImage.toPng(calendarRef.current, {
+            backgroundColor: "white",
+            style: { 
+            background: "white",
+            marginTop: "20px",
+            marginBottom: "20px",
+            marginRight: "20px",
+            marginLeft: "20px",}})
+        .then(function (dataUrl) {
+            var img = new Image();
+            img.src = dataUrl;
+            fetch(dataUrl)
+            .then(response => response.blob())
+            .then(blob => {
+                const href = window.URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = href;
+                link.download = 'my-schedule.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            })
+            .catch(error => console.error('Error downloading file:', error));
+        })
+        .catch(function (error) {
+            console.error('oops, something went wrong!', error);
+        });
     };
 
     return (