React 구성 요소를 이미지로 변환하는 방법

사용자에게 웹 애플리케이션의 일부를 이미지로 다운로드할 수 있는 기능을 제공하려는 경우가 있습니다. 이 경우 React 구성 요소를 이미지로 변환하는 방법이 필요합니다. 그리고 html2canvas라는 타사 NPM 패키지를 사용하면 간단할 수 있습니다. 어떻게 하는지 살펴보겠습니다.

설정

먼저 사용자가 다운로드 버튼을 누를 때 다운로드할 HTML 마크업에 div를 표시해야 합니다. 차트, 사용자 데이터, 테이블 또는 원하는 모든 것이 될 수 있습니다. 해당 요소에 ID를 할당합니다.

<div id="print">This will be downloaded as an image</div>

다운로드 버튼에 연결된 이벤트 핸들러를 사용하여 이것을 React 구성 요소로 래핑할 수 있습니다.

const App = () => {
  const handleImageDownload = () => {
    // TODO: add logic here
  };
  return (
    <>
      <button type="button" onClick={handleImageDownload}>Download</button>
      <div id="print">This will be downloaded as an image</div>
    </>
  );
}

프로그래밍 로직

앞에서 설명한 것처럼 html2canvas NPM 패키지를 설치합니다.

npm install html2canvas

그런 다음 패키지를 사용하여 이미지로 변환하려는 해당 div를 가져오기만 하면 됩니다. 그런 다음 메모리에 링크를 생성하여 이미지를 다운로드하고 프로그래밍 방식으로 클릭한 다음 DOM에서 링크를 제거합니다.

const handleDownloadImage = () => {
    const element = document.getElementById('print'),
    canvas = await html2canvas(element),
    data = canvas.toDataURL('image/jpg'),
    link = document.createElement('a');

    link.href = data;
    link.download = 'downloaded-image.jpg';

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

이것이 React 구성 요소를 이미지로 변환하기 위해 해야 할 전부입니다! 이 게시물이 도움이 되었기를 바랍니다.

2021년 9월 28일 https://www.wisdomgeek.com에서 원래 게시되었습니다.