html2canvas 적용 시 table border 안나오는 문제

2017.03.13 16:08language/javascript

 

이전에 html2canvas 를 이용해서 jsp 환경에서 페이지를 이미지로 다운받는 것을 포스팅하였다.

 

http://cofs.tistory.com/293

 

 

필자는 테이블을 이미지로 바꿔 다운받아야 했다.

 

그런데 이상하게 ie Egde 에서는 잘되는데 ie9, ie10, ie11 에서는 각기 다르게 오류 증상이 나타났다.

 

어떤 버전은 border가 안나오고 어떤녀석은 배경이 안나오거나 스타일이 일부 누락되었다.

 

역시 소문대로 css 적용에 있어 미흡한 부분이 있었다.

 

그래서 찾다보니 아주 심플하게 해결하는 방법이 있었다.

 

 

html2canvas 0.5.0-alpha1 버전에서만 테스트를 진행하였다.

 

 

 

html2canvas.js 파일의 다음 부분을 바꿔주면 된다.

 

2384 라인쯤 가면 나온다.

 

1
2
3
4
5
        return {
            width: container.cssInt('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };
cs

2# : cssInt 를 cssFloat 로만 바꿔주면 된다.

 

1
2
3
4
5
        return {
            width: container.cssFloat('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };
cs

 

ie9, ie10, ie11 ieEdge, Chrome 에서 모두 테스트 했고 더이상의 이상증상은 없었다.

 

 

 

 

  • 프로필사진
    재연2017.07.31 15:09

    안녕하세요 html2canvas검색중에 방문하게되었습니다.
    css에서 다중그림자 text-shadow를 ,로 여러개 겹쳐서 쓰는 경우 html2canvas에서 읽히지 않던데
    방법이 있을까요??

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2017.08.01 08:52 신고

      글쎄요 ㅠㅠ 이부분은 상황을 재현해놓고 테스트를 해봐야 알거같아요 ㅎㅎ
      상황이 없이 plugin 분석해서 해결하는건 조금 무리가 있습니다 ㅠ

  • 프로필사진
    개발자2019.01.16 16:05

    하... 정말감사합니다...
    열심히 검색해도 답을 못찾고있었는데
    이제야 찾았네요ㅠㅠ