[html2pdf] pdf 출력 시 쏠림현상, 한쪽 라인이 흐릿한 현상 해결하기

html2pdf 구현 중 많은 문제를 직면했다. 그 중 알고는 있지만 외면하고 있던 문제들을 결국 지적받았다 ㅎㅎ

 

※ 두가지 문제

1. pdf left에 margin이 생김 (사실 편법으로 right에도 margin을 주는 방법으로 처리를 해놨는데 이로 인해 2번 문제가 생김)

2. pdf 왼쪽 라인들이 흐릿하게 보임

 

왼쪽 테두리가 조금 더 두꺼운거 보이시나요?

 

 

※ 원인

canvas로 변경 시 html의 Xscroll (가로 scoll)까지 인식하여 생기는 문제

 

※ 해결

편법인지 모르겠지만 scroll을 hide 처리 한 다음 pdf 다운로드 후 다시 scroll을 보이게 처리

 

기존 html2pdf 옵션 - scroll로 인해 밀리는만큼 margin을 넣어줘 임의로 처리

            let opt = {
                pagebreak: 'css',
                margin: [0,0,0,4],
                margin: 1,
                filename: 'aml_report',
                image: { type: 'jpg', quality: 0.98 },
                html2canvas: { scrollY:0, scrollX:0, scale:1, dpi: 300, letterRendering: true, allowTaint: true
                    /*
                    ignoreElements : function( element  ) {
                        if( element.id == "pdf-button-area" ) {
                            return true;
                        }
                    }*/
                    },

                jsPDF: {orientation: 'portrait', unit: 'mm', format: 'a4', compressPDF: true},
            };

 

수정 후 html2pdf 옵션 - margin을 없애고 scrollbar hide, show처리 삽입

            var html = document.getElementsByTagName("html")[0];
            html.classList.add( "hide-scrollbar" )
            var element = document.getElementById('pdf-area');
            let opt = {
                pagebreak: 'css',
                //margin: [0,0,0,4],
                margin: 1,
                filename: 'aml_report',
                image: { type: 'jpg', quality: 0.98 },
                html2canvas: { scrollY:0, scrollX:0, scale:1, dpi: 300, letterRendering: true, allowTaint: true
                    /*
                    ignoreElements : function( element  ) {
                        if( element.id == "pdf-button-area" ) {
                            return true;
                        }
                    }*/
                    },

                jsPDF: {orientation: 'portrait', unit: 'mm', format: 'a4', compressPDF: true},
            };
            //html2pdf(element).set(opt);

            //var source = window.document.getElementById("exportPdf").innerHTML;
            //var worker = html2pdf().set(opt).from(element).save();
            html2pdf().set(opt).from(element).save()
                .then( function() {
                    html.classList.remove( "hide-scrollbar" )
                });

 

#pdf left margin remove

#html2pdf scroll

#html2pdf border

#html2pdf right left

#html2pdf margin right left