이미지, 텍스트 다운로드

이미지 다운로드

html2canvas를 이용하여 다운로드를 한다.

html2canvas는 ts로 작성돼있어 @types가 필요없다.

원하는 구역의 element를 넣어주면 stack을 활용하여 canvas로 element를 감싸고 그 canvas를 반환해준다. 그부분은 iframe 형식으로 잠시 추가됐다가 사라지는 것 같다.

canvas에는 toDataURL이라는 메소드가 있기 때문에 그 메소드를 사용해서 dataURL을 얻어내고, a태그를 생성하여 다운로드 할 수 있게 한다.

import html2canvas from 'html2canvas';
...
...
...

const downloadImage = () => {
    if (mathfieldRef) {
      html2canvas(mathfieldRef).then((canvas) => {
        const uri = canvas.toDataURL('image/png');
        const element = document.createElement('a');
        element.download = `수식셰프${Date.now()}.png`;
        element.href = uri;
        element.click();
      });
    }
  };

텍스트 다운로드

텍스트 다운로드는 다른 라이브러리를 쓸 필요 없이

Redux에서 가져온 currentTabInfo.latex를 바탕으로 a태그를 생성하여 다운 받게한다.

const downloadText = () => {
    const fileName = `수식셰프${Date.now()}.txt`;
    const element = document.createElement('a');
    element.href = `data:text/plain; charset=utf-8,${currentTabInfo.latex}`;
    element.download = fileName;
    element.click();
  };