PDF 다운로드 기능 제작(with html2canvas, html-to-image)
html2canvas, html-to-image와 jsPDF를 활용해 PDF 다운로드 기능을 만들어보자
html2canvas와 jsPDF 라이브러리를 활용해 PDF 다운로드 기능 추가
const pdf = new jsPDF();
const imgProperties = pdf.getImageProperties(imageUrl);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
pdf.addImage(imageUrl, "JPG", 0, 0, pdfWidth, pdfHeight);
pdf.save(`Certificate(${nickname}).pdf`);html-to-image와 jsPDF 라이브러리를 활용해 PDF 다운로드 기능 추가
toJpeg(imageRef.current as HTMLElement, { backgroundColor: "#F3F3F3" })
.then((dataUrl) => {
const pdf = new jsPDF();
const imgProperties = pdf.getImageProperties(dataUrl);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
pdf.addImage(dataUrl, "JPG", 0, 0, pdfWidth, pdfHeight);
pdf.save(`Certificate(${nickname}).pdf`);
setIsLoading(false);
saveDownloadLog({
data,
mode: mode as Mode,
userAgent: navigator.userAgent,
});
})
.catch((error) => {
console.log(error);
});