Material-UI html2canvas SVG 안나오는 문제

React 환경에서 화면을 만들고 html2canvas, jsPDF 모듈로 이미지를 PDF 파일로 만드는 작업을 했다.

이전에도 많이 했던 작업이었는데, 처음으로 격은 난관이라 기록하려고 한다.

 

html2canvas로 canvas 객체를 만들어 이미지를 만든 후 화면에 뿌려 확인해보니 Material-UI로 만든 체크박스가 안보였다.

계속 구글링해서 찾아보니 SVG의 문제였다. Canvas을 만들면서 svg을 처리하지 못하는 모양이다.

 

그래서 html2canvas 옵션을 확인해 적용해봤지만 영향을 주지 않았다.

방법은 Material-UI Checkbox props 명세를 보면 icon, checedIcon이 있다.

이  두개의 props에 이미지 컴포넌트를 넘겨서 해결했다.

 

직접적인 해결 방법이 아닌것 같아 찝찝하긴 했지만 결과적으로 차이는 없는 것 같다.

const CheckedImg = require('../../assets/image/icon/checked.png')
const UnCheckedImg = require('../../assets/image/icon/unchecked.png')

const CheckedBox = () => {
  return <img src={CheckedImg} />
}

const UnCheckedBox = () => {
  return <img src={UnCheckedImg} />
}

const PDFCheckBox = withStyles(theme => ({
  root: {
    '& img': {
      width: 18,
      height: 18
    }
  }
}))(props => {
  return <Checkbox icon={<UnCheckedBox/>} checkedIcon={<CheckedBox/>} {...props}/>
})