ボタンをクリックしてjsonファイルにダウンロード


結果



内容

  • exportボタンをクリックして、画面上の投稿をjsonファイル
  • にダウンロードします.

    コード#コード#

    
    //파일 다운로드 하는 함수, onDownloadBtn에서 인수를 받아온다
      const downloadFile = async ({ data, fileName, fileType }) => {
        //파일로 다운로드할 데이터로 Blob를 만든다 [Blob이란? (Binary Large Object, 블랍) 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용]
        const blob = new Blob([data], { type: fileType });
        // a태그를 생성하고 해당 요소에 클릭 이벤트를 보낸다
        // 다운로드를 한다
        const link = document.createElement('a');
        link.download = fileName;
        link.href = await URL.createObjectURL(blob);
    
        const clickEvt = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true,
        });
        link.dispatchEvent(clickEvt);
        link.remove();
      };
    
      //버튼을 클릭하면 실행되는 함수
      // data, fileName, fileType에 값을 담아 downloadFile의 인수로 보낸다
      const onDownloadBtn = () => {
        const name = 'project_list'; //파일명
        downloadFile({
          data: JSON.stringify(data),
          fileName: `${name}.json`,
          fileType: 'text/json',
        });
      };
    
    return(
            <TwoButton
            buttonTextFirst="Import"
            buttonTextSecond="Export"
            handleCheck={handleCheck}
            data={data}
            onDownloadBtn={onDownloadBtn}
    		/>
     )
    参考文献
    https://theroadtoenterprise.com/blog/how-to-download-csv-and-json-files-in-react
    https://stackoverflow.com/questions/55613438/reactwrite-to-json-file-or-export-download-no-server