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

 

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

 

http://cofs.tistory.com/293

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

 

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

 

2384 라인쯤 가면 나온다.

 

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

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

 

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

 

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