html2canvas, jspdf 해상도 개선

해상도 깨짐

html2canvas 기본 사용법에 다음과 같은 코드가 있다.

html2canvas(프린트영역).then()

근데 그대로 쓰면 흐릿하게 나오며 해상도가 박살난다.

왜?

보통은 A4용지 크기에 맞춰서 사용할텐데 그러면 canvas를 늘려서 이미지로 뽑아내기 때문이다.
이미지를 3~4배 정도로 키워줘야 해상도가 깨지지 않는다

해결

다음과 같이 html2canvas 함수에 scale 파라미터를 추가해주자

html2canvas(프린트영역, {scale:4}).then()

번외

표를 넣는 경우에 테두리가 있다면 우리는 border-collapse를 사용한다
근데 얘는 그런거 모른다
그래서 pdf로 저장해보면 테두리가 두껍게 나온다

th td에 border-top, border-left 값을 주고
table에 border-right, border-bottom 값을 주면 구분선이 두껍게 나오는걸 해결할 수 있음