[React.js] 네이버 지도 API, 지도 화면 PDF로 변환! 지도는 없고 빈 화면만 ㅠㅠ

1. 네이버 지도 API, 지도 화면 PDF로 변환했는데 빈 화면만?!

[그림 1] 빨간 색으로 표시된 부분이 지도 영역이다.

 

네이버 지도 API로 렌더링 된 지도가 포함된 페이지를 PDF 파일로 저장하는 기능을 적용했다. 사용한 모듈은 html2pdf와 html2canvas이다. 에러 없이 잘 저장되었으나 생성된 PDF 파일을 열었더니 [그림 1]과 같이 지도 영역에는 빈 화면만 있었다. ㅠㅠ

 

2. html을 이미지로 변환, 이미지를 PDF로 변환!

html을 이미지로 만들고 그 이미지를 PDF로 만들면 되지 않을까하는 생각이 들었다. 그래서 npm에서 html-to-image와 jspdf를 찾아 설치하여 테스트를 진행했다. 설치한 라이브러리 리스트는 다음과 같다.

"html-to-image": "^1.11.11",
"jspdf": "^2.5.1",

 

[그림 2] html-to-image에의해 base64로 인코딩된 html

 

html2canvas로 지도 화면을 조작했을 때는 표현되지 않았던 지도가 html-to-image를 이용해 png 화면을 만들었더니 표현이 되었다. [그림 2]와 같이 html이 base64로 인코딩 되었고 이것을 jspdf를 이용해 PDF로 변환하여 저장하였다. 최종 테스트한 코드는 아래와 같다.

const refTotal = useRef();

// 지도가 포함된 화면을 PNG로, PNG를 PDF로
const downloadTest = () => {
    if (refTotal.current === null) {
      return;
    }
	// html-to-image
    toPng(refTotal.current, { cacheBust: true })
      .then(dataUrl => {
        const img = new Image();
        img.src = dataUrl;
        console.log('img.src : ', img.src);

        img.onload = () => {
          const imgData = dataUrl;
          // jspdf
          const pdf = new jsPDF('p', 'mm', 'a4', true);
          const pdfWidth = pdf.internal.pageSize.getWidth();
          console.log('pdfWidth : ', pdfWidth);
          const pdfHeight = pdf.internal.pageSize.getHeight();
          console.log('pdfHeight : ', pdfHeight);
          const imgWidth = img.width;
          console.log('imgWidth : ', imgWidth);
          const imgHeight = img.height;
          console.log('imgHeight : ', imgHeight);
          const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
          const imgX = (pdfWidth - imgWidth * ratio) / 2;
          const imgY = 30;
          pdf.addImage(
            imgData,
            'PNG',
            imgX,
            imgY,
            imgWidth * ratio,
            imgHeight * ratio,
          );
          pdf.save('map_down_test.pdf');
        };
      })
      .catch(err => {
        console.log(err);
      });
};

 

[그림 3] 지도가 잘 표현된 PDF

 

[그림 3]은 위 코드를 이용해 지도가 잘 표현되어 저장된 PDF 파일이다.