[문제해결] PDF 출력

문제발생

회사에선 보고서를 생성하는 솔루션을 서비스중이었다.
어느날, PDF 출력이 안된다는 고객 문의가 있었다.
테스트를 해보니 보고서의 양이 많으면 PDF 출력이 안되었다.

해결과정

• 기존 toPng 사용 후 PDF 출력 -> toJpeg 사용 후 PDF 출력
• 기존 png 파일들을 모아 PDF 출력하다보니 용량이 크고 시간을 초과하는 경우가 있었다. jpeg로 변환 후 출력해보니 문제가 해결되었다.
• png -> jpeg로 변경하며 PDF가 선명하지 않을것을 걱정했지만 선명하게 잘 보여 걱정을 덜었다.

간단 요약

• 기존 png 변환 후 PDF 출력
  이미지 38장 기준 1분7초 메모리 용량이 너무 커 pdf 저장 불가
• JPEG 로 변경 후 PDF 출력
  이미지 38장 기준 50초 31.9MB 출력 가능

// 이미지 변환
const changeImg = async (_img: any) => {
  const canvas = await htmlToImage.toPng(_img,{}); // 기존
  const canvas = await htmlToImage.toJpeg(_img,{}); // 변경 후
  return canvas
};

// 변환된 이미지를 사용하여 PDF를 만드는 함수
const canvas = await converToImg();
const doc = new jsPDF({
  unit: 'px',
  orientation: 'p',
  format: 'a4',
});
doc.addImage(canvas, 'PNG', 0, 0, 길이, 높이); // 기존
doc.addImage(canvas, 'JPEG', 0, 0, 길이, 높이); // 변경 후

느낀점

• 처음에 이 문제를 맞닥뜨렸을때는 메모리 문제가 아닌가 하는 의견이 있었다. 해서 png로 변환한 이미지 파일이 메모리를 많이 잡아먹는게 아닌가 하는 생각이 들었고 jpeg로 변환 후 출력하여 문제를 해결했었다.
• 프론트단에서 항상 이슈가되는 이미지 최적화에 대해 이를 이용한 PDF 출력에 대해 더 공부해봐야겠다.