Pdf로 저장하기

[sihyun10]

Description

페이지에 보이는 내용들을 pdf파일로 저장할 수 있는 기능 구현

Todo List

• [x] 라이브러리 선정
• [ ] src>components>Layout>Title>index.tsx 파일에 있는 PDF로 저장하기 버튼에 연결하기

[sihyun10]

'react-pdf'는 PDF를 렌더링하는 역할은 하지만, pdf를 생성하고 저장하는 기능을 제공하지 않기에 '@react-pdf/renderer' 이 라이브러리를 사용하여 pdf로 변환하고 저장하게끔 코드를 짜려고 했습니다. (추가적으로 pdf파일을 저장하는 로직을 하려면 'file-saver'라는 라이브러리도 필요했음)

하지만 위의 라이브러리를 사용했을때의 문제점은 pdf 다운로드 하는 게 원하는 시점에 생성되지 않고, TypeError: dispatcher.useInsertionEffect is not a function 이와 같은 오류도 발생했었다. 패키지 버전 호환성 문제가 발생했었다.

[sihyun10]

따라서, html2canvas, jspdf 두 라이브러리를 사용하게 되었습니다. html2canvas 이 라이브러리를 사용하여, HTML 요소를 캔버스로 그리고, 이를 이미지 데이터로 변환. jspdf 라이브러리를 이용해, 이미지 데이터를 pdf로 변환. 즉, javascript로 pdf를 생성하고, 조작할 수 있는 라이브러리입니다. 두 라이브러리를 활용해 PDF로 저장하는 로직을 구현하려고 한다.