이미지, 텍스트 다운로드 - boostcamp-2020/Project15-C-Client-Based-Formula-Editor GitHub Wiki

이미지 다운로드

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();
  };

둘 다 크롬에서 되는 방법이다. 다른 브라우저에서는 다른 방법을 사용해야 한다. 하지만 우리 프로젝트는 크롬 익스텐션이기 때문에 크롬 브라우저용이면 충분하다.