html2canvas / file-saver / Mui Modal

회사에서 원한 기능

'서버에서 받아온 데이터 1, 2와 바코드 이미지를 사용해서 라벨을 만들어주세요,

그리고 그 이미지를 누르면 png파일로 다운로드되게 해주세요'

 

...???

<div>로 css를 이용해서 원하는 뷰는 쉽게 만들 수 있겠다 생각했는데,

그 이후로 다운로드..? png 파일로 ..? 가 가능할지 상상이 안되었습니다.

 

일단 제가 검색한 내용은

'javascript div png download'  or ' React div image download' 였습니다 .

 

제 코딩 선생님에게 이런식으로 검색해도 잘 모르겠다고 하고 조언을 구했습니다.

 

'html canvas'를 검색해서 찾아보라해서 이쪽으로 찾아보게되었습니다!

 

 

일단 html canvas 라이브러리는 제가 그림판을 구현할 수 있게하는 거였고,

제가 쓰고 싶어하는 기능은

html2canvas 였습니다!!

 

---

html2canvas

 

React에서 화면 (DOM)을 캡쳐해주는 라이브러리입니다.

 

이런 스크린샷을 도와주는 라이브러리가 종류가 더있는데 저는 html2canvas를 이용했습니다.

(이 외의 라이브러리 : dom-to-image, html-to-image)

 

html2canvas가 svg 및 canvas 요소도 캡쳐할 수 있다고해서 이 라이브러리를 썼습니다.

저는 바코드가 이미지라 혹시라도 하는 마음 때문에 ㅜㅜ 

그리고 html2canvas가 사용량이 더 크다고 합니다  ㅎㅎㅎ

 

---

자세하게 정리해보겠습니다.

(혹시라도 제가 또 해야할 수 있으니)

 

html2canvas

사용자 브라우저에서 직접 웹 페이지 또는 그 일부의 '스크린샷'을 찍을 수 있고,

스크린샷은 DOM을 기반으로 합니다.

캡쳐할 영역 (DOM)을 지정하고 해당 영역에 대한 스크린샷을 찍을 수 있도록 도와주는 라이브러리 입니다.

 

 

설치방법

npm install html2canvas
or
yarn add html2canvas

 

 

그리고

이것만 쓰면 자동다운로드를 막아둔 환경에서는 안되서

file-saver 라이브러리를 추가로 사용했습니다.

 

file-saver를 사용하면

PC, Mobile 각 환경에 맞게 브라우저 모두 호환이 가능하게 해주는 기능이 있고,

간단한 코드로 파일을 blob, file, url 형식에 대한 파일로 저장하는 것을 도와준다.

 

설치방법

npm install file-saver --save
or
yarn add file-saver

 

 

 

저는 진짜 정리를 잘해주신 블로그가 있어서 그분거 따라서 잘써서 그거 참고해서 적을게요!

https://yong-nyong.tistory.com/53#--%--html-canvas%--%-B%--file-saver

// 출처 : 용뇽 개발 노트//

 

 

일단 이분도 다행히 저랑 같게

개발 환경은

React+TypeScript

입니다.

 

아 참고로 저는 타입정의는 따로 안했습니다.

이부분은 필요하신분은 용뇽님 블로그 보시고 확인하고 적용해보셔용

 

 

 

html2canvas+file-saver

import './styles.css';

import html2canvas from 'html2canvas';

import saveAs from 'file-saver';

import { useRef } from 'react';

export default function App() {

    const divRef = useRef<HTMLDivElement>(null);

    const handleDownload = async () => {

    if (!divRef.current) return;

    try {

        const div = divRef.current;

        const canvas = await html2canvas(div, { scale: 2 });

        canvas.toBlob(blob => {

            if (blob !== null) {

                saveAs(blob, 'result.png');

            }

        });

    } catch (error) {

        console.error('Error converting div to image:', error);

    }

};

return (

    <div className="App">

        <div

            ref={divRef}

            style={{ backgroundColor: 'lime', width: '300px', height: '200px' }}

        >

            <h1>Hello CodeSandbox</h1>

            <h2>Start editing to see some magic happen!</h2>

        </div>

        <button onClick={handleDownload}>다운로드</button>

    </div>

  );

}

 

React 환경에서는 useRef DOM요소를 다루는 것이 일반적이기 때문에 useRef로 캡처 영역을 지정해 주었다.

캡처할 영역을 지정해 주고 html2canvas에 넘겨주고 

html2canvas가 캡처해 준 것 blob으로 변환한 다음 file-saver를 통해서 저장되도록 해주면 됩니다.

 

 

 

---

 

 

저는 버튼1을 누르면 라벨의 모양이 뜨고 그 라벨을 눌렀을 때 다운로드가 되야했습니다.

 

그래서 일단 버튼1은 모달을 띄우는 버튼이였고,

그 모달창에 캡쳐하려는 DOM이 있어야했습니다.

 

모달은 Mui 모달을 이용해서 구현했습니다.

https://mui.com/material-ui/api/modal/

Modal API - Material UI

모달 부분은 여기서 구현했고,

 

ref 같은 경우는 사실 제가 그 캡쳐하려는 부분을 누르면 그부분이 다운로드 되었어야 했기 때문에 

onClick 이벤트 넣는 곳에 ref 를 같이 넣어서 진행 했습니다.

 

 

 

 

만약에 모달창을 Mui말고 구현해내고싶다 하시면

https://jeewonscript.tistory.com/25

[React/Typescript] Modal/Dialog, 모달 창 만들기

이분이 모달창 엄청 간단하게 해주셔서 보시면 이해가 쉬우실겁니다!