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

feat: html2canvas -> htmlToImage and fix derick's bugs

Browse Source
This commit is contained in:
Lukas Zenick
2024-02-18 12:46:35 -06:00
committed by doprz
parent 58c2b4634a
commit bda02826b1
3 changed files with 29 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,5 @@
import React, { useRef } from 'react';
// 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';
@@ -40,42 +38,36 @@ 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();
// });
// }
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);
htmlToImage
.toPng(calendarRef.current, {
backgroundColor: 'white',
style: {
background: 'white',
marginTop: '20px',
marginBottom: '20px',
marginRight: '20px',
marginLeft: '20px',
},
})
.catch(error => console.error('Error downloading file:', error));
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
.then(dataUrl => {
let 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(error => {
console.error('oops, something went wrong!', error);
});
};
return (