웹 버튼누르면 다운로드하는프로그램 만들기

잡담

제목을 간결하게 만들기 힘들어서 그냥 이렇게 적었다 ㅎㅎ

 

어.. 간단히 말하면

 

뭐 한글파일,ppt등 버튼? 제목등 누르면 다운로드 되는 거랑...

 

화면 캡처하는 방법??? 등등

 

시작전 유희사항

이건 노드모듈이 필요해서 node.js를 반드시 설치하고 오세요!!

 

저는 리액트로 만들었습니다.(반드시

리액트일 필요는 없고.. 모듈을 import할수만 있으면 될껍니다..)

만들기

npm i html2canvas
yarn add html2canvas

모듈을 설치한 다음에

 

import Htmlcanvas from 'html2canvas';//필수


function printDiv(id){
    Htmlcanvas(id).then((canvas) => {//id부분 캡처
        let myImg=canvas.toDataURL("image/png");//캡처한부분을 png로 추출
        Download(myImg,"test");
    })
}

function Download(myImg,imgName){
    let link=document.createComment("a");//a태그 만들기
    link.download=imgName;//다운로드 이름지정
    link.href=myImg;//다운받을 img새팅
    link.click();//a태그 click이밴트 강제 실행=> 다운로드
}

 

이걸 간단하게 설명하면 화면을 캡처한뒤에 캡처한걸 png로 만들고

 

그 png를 a태그를 이용해서 다운로드하 방식입니다.

 

다운로드