버튼 클릭시 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
Author And Source
이 문제에 관하여(버튼 클릭시 json 파일로 다운로드 받기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/버튼-클릭시-json-파일로-다운로드-받기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)