html2canvas,jsPDF 를 이용한 pdf 만들기

Question

스타트업에서 막취업한 프론트 신입개발자 입니다 
두가지 궁금한게 있습니다.
회사에서 설문조사를 만들고 완료한 설문조사를 pdf파일로 변환시켜 다운로드할수 있게기능 구현하라고하셨습니다 설문지 한카테고리당 5장 ~6장정도의 설문지 페이지가 있는데 
const blob = new Blob([doc.output(blob)], { type: application/pdf });
  const url = URL.createObjectURL(blob)
1.만들때마다 서버에 요청해서 저장해야하는지 아니면 로컬에 저장했다가 모든설문조사가 완료하면 서버에 요청해야하는지 감이 잘안잡힙니다.. 그리고 2.html2canvas 캡쳐하면 css가 깨져버리고 a4용지크기로 크기로 맞춰서 a4 용지보다 크면 다음 페이지로 넘어가면서 이미지가 이쁘지 않게 잘리는 현상이 발생합니다 혹시 좋은 방법이 있을까요 도와주세요.. ㅠㅠ

커리어리 AI 봇 · Answer

안녕하세요! 설문조사를 pdf 파일로 변환하는 기능에 대해 궁금하신 내용에 대해 안내해 드리겠습니다.

1. 로컬 저장 vs 서버 요청:
설문조사를 pdf 파일로 변환하는 경우, 로컬에 저장하거나 서버에 요청하는 방식 중 어떤 방식을 선택할지는 여러 가지 요소에 따라 결정될 수 있습니다.

- 로컬 저장: 각 설문조사 페이지에서 pdf 파일을 생성하고 로컬에 저장할 수 있습니다. 이 경우, 사용자가 설문을 완료할 때마다 pdf 파일이 생성되고 로컬에 저장됩니다. 사용자가 모든 설문을 완료한 후에는 로컬에 저장된 pdf 파일을 서버로 업로드하거나 일괄적으로 서버에 전송할 수 있습니다.
- 서버 요청: 각 설문조사 페이지에서 pdf 파일을 생성하고 서버에 요청하여 저장할 수도 있습니다. 이 경우, 각 설문조사를 완료할 때마다 서버로 요청을 보내고, 서버에서 pdf 파일을 생성하고 저장합니다.

어떤 방식을 선택할지는 여러 가지 요소에 따라 다를 수 있습니다. 예를 들어, 사용자가 설문을 완료한 후에 바로 pdf 파일을 받을 수 있어야 하는지, 서버로 한 번에 업로드할 때 더 편리한지, 저장된 데이터를 다시 활용해야 하는지 등을 고려하여 결정하시면 됩니다.

2. html2canvas와 css 깨짐, 이미지 잘림:
html2canvas를 사용하여 html 페이지를 캡처하고 pdf로 변환할 때, CSS 깨짐 및 이미지 잘림과 같은 문제가 발생할 수 있습니다. 이는 html2canvas의 한계로 인한 것일 수 있습니다.
이를 해결하기 위해 몇 가지 방법을 시도해 볼 수 있습니다:

- CSS 깨짐: html2canvas는 일부 CSS 속성을 지원하지 않을 수 있습니다. CSS 깨짐을 최소화하기 위해 CSS 속성을 html2canvas가 지원하는 속성으로 변경하거나, CSS를 inline 스타일로 적용하여 캡처할 요소에 직접 적용해보세요.
- 이미지 잘림: 이미지가 A4 용지보다 큰 경우, 이미지가 잘릴 수 있습니다. 이를 방지하기 위해 이미지를 A4 용지 크기로 조정하거나, 여러 페이지로 분할하여 캡처할 수 있는 방법을 고려해보세요.