DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Derek/export png (#95)

Browse Source 
* 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
This commit is contained in:
Derek Chen
2024-02-17 19:09:41 -06:00
committed by GitHub
parent e44b0c0e45
commit ae32d0b645
3 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -24,6 +24,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",

7
pnpm-lock.yaml generated
View File

@@ -34,6 +34,9 @@ dependencies:
highcharts-react-official:
specifier: ^3.2.1
version: 3.2.1(highcharts@11.3.0)(react@18.2.0)
html-to-image:
specifier: ^1.11.11
version: 1.11.11
html2canvas:
specifier: ^1.4.1
version: 1.4.1
@@ -8663,6 +8666,10 @@ packages:
engines: {node: '>=8'}
dev: true
/html-to-image@1.11.11:
resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
dev: false
/html2canvas@1.4.1:
resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
engines: {node: '>=8.0.0'}

47
src/views/components/common/CalendarGrid/CalendarGrid.tsx
View File

@@ -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 (