[알게된 것] html2canvas 글자 이동현상

😀문제

html2canvas를 통해 태그를 canvas로 옮기고, pdf로 출력하는 과정에서 글자가 아래로 쏠리는 현상이 일어나 레이아웃은 뭉개지고 글자는 겹쳤다.

😁해결방안

TailwindCSS의 img 태그 설정 무시로 인해 발생하는 문제이며,

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

img를 inline-block으로 고정해주어 해결하였음

출처: https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1204988157