jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64)

Vue3 프로젝트에서 운행내역, 급여명세서, 재직증명서 등 pdf 다운받는 기능이 있다.

테이블 형식으로 표출하는 내용이라

 

jspdf , jspdf-autotable 라이브러리 사용해서 구현해놓은 상태이다.

 

 

 

jsPDF 함수 정리해놓은 github 참고 

https://artskydj.github.io/jsPDF/docs/module-AcroForm-AcroFormComboBox.html#setOptions

AcroFormComboBox - Documentation

 

 

 

 

 

 

 

 

 

 

 

🔥 pdf 파일에 이미지를 넣었는데 적용이 안되는 문제가 발생했다. + 한글도 깨짐 (폰트 라이브러리 적용 안됨)!

---

 

 

 

jsPDF 해당 npm 문서를 확인해보니,

jspdf 는 utf-8 을 지원하지 않는 것 같다 

 

 

jspdf는 이미지를 직접적으로 처리하지 않는다. 따라서 이미지를 PDF에 추가하려면 이미지를 base64 형식으로 변환하여 jspdf에 전달해야 한다.

이렇게 하면 이미지 파일을 직접 로드하지 않고도 이미지 데이터를 텍스트로 변환하여 전달할 수 있다. 그리고 jspdf는 base64 형식으로 된 이미지 데이터를 받아들일 수 있다.

 

✅ base64
말 그대로 64진법
8비트 이진 데이터를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식

인코딩(encoding) ? 은 파일에 저장된 정보의 형태나 형색을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말한다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며, 반대말은 디코딩 이다.

 

 

즉,  이미지 데이터를 텍스트 형식으로 인코딩하여 pdf 라이브러리에 적용해줘야 한다.

 

 

 

 

🔽 아래 사이트에서 base64 형태의 데이터로 변환

https://www.giftofspeed.com/base64-encoder/

 

 

import { suit } from '@/assets/suit' //font
import { logo } from '@/assets/logo' //image

  doc.addFileToVFS('suit.ttf', suit)
  doc.addFont('suit.ttf', 'suit', 'normal')
  doc.setFont('suit')
  
  
  
  doc.addImage(logo, 'JPG', 5, 5, 74, 25)

  ...
  
  
  
// base64로 인코딩한 파일을 import 해와서 사용