-
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJSHTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 2. 19. 17:59
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS
일반적으로 json 데이터를 xlsx로 서버단에서 변환하고 response로 쏘아서 다운로드를 하고 있습니다.
ReactJS를 사용하면서, 화면내에 있는 데이터를 xlsx로 다운로드 하고 싶어서 찾아보니, file-saver라는 모듈이 있네요.jons을 XLSX형식으로 변환하는 모듈은 xlsx을 사용하였습니다.
예제
#index.jsx import "./styles.css"; import { saveAs } from "file-saver"; import * as XLSX from 'xlsx'; export default function App() { const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"; const fileExtension = ".xlsx"; const ws = XLSX.utils.json_to_sheet([ { id: 1, name: "Daniel", age: "20", sex: "M" }, { id: 2, name: "Kim", age: "30", sex: "M" }, { id: 3, name: "Lee", age: "33", sex: "M" }, { id: 4, name: "Min", age: "50", sex: "F" }, { id: 5, name: "Yun", age: "20", sex: "F" } ]); const fileDownload = () => { const wb = { Sheets: { data: ws }, SheetNames: ["data"] }; const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" }); const data = new Blob([excelBuffer], { type: fileType }); saveAs(data, `file${fileExtension}`); }; return ( <div className="App"> <h1>JSON to XLSX</h1> <button onClick={fileDownload}>FILE DONWLOAD</button> </div> ); }
이전에는 더 복잡하게 처리 했었는데, file-saver를 사용하면 쉽게 frontend에서도 다운로드 구현이 가능합니다.
참고 자료
'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글
reactjs 합성 사용하기 (0) 2021.07.09 tailwindcss with ReactJS (0) 2021.02.21 Reactjs의 setState는 비동기(asynchronous)로 동작 합니다. (0) 2021.01.10 Docker image로 vue build 시 오류 원인 (0) 2021.01.07 react-staripts build에서 메모리 설정 하는 방법 (0) 2021.01.03