SheetJS Community Edition | SheetJS Community Edition
리액트에서 엑셀파일 내보내기 기능을 구현하고자 사용하게 되었다.
👉설치 npm i --save https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz
https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz
aoa_to_sheet
converts an array of arrays of JS data to a worksheet.json_to_sheet
converts an array of JS objects to a worksheet.table_to_sheet
converts a DOM TABLE element to a worksheet.sheet_add_aoa
adds an array of arrays of JS data to an existing worksheet.sheet_add_json
adds an array of JS objects to an existing worksheet.참고: https://sanghye.tistory.com/35
import { utils, writeFile } from "xlsx";
import dayjs from "dayjs";
export default function App() {
// 정제된 데이터를 담아줄 state
const [exportArr, setExportArr] = useState([])
// 정제될 대상의 Array
const userList = [{
name: "haewon",
age: 28,
job: "FE"
},
...]
function ExportHandler() {
const excelTableHead = [["이름", "나이", "직업"]];
// excel 문서 만들기
const wb = utils.book_new();
// 열 순서를 sheet화
const ws = utils.json_to_sheet([]);
// ws에 excelTableHead를 추가
utils.sheet_add_aoa(ws, excelTableHead);
// 예외처리 userList가 있을 경우에만 Export
if (userList.length > 1) {
for (let i in userList) {
// 데이터가공
const processedData = {
userName: userList[i].name,
userAge: userList[i].age,
userJob: userList[i].job
};
exportArr.push(processedData);
}
}
utils.sheet_add_json(ws, exportArr, { origin: "A2", skipHeader: true });
utils.book_append_sheet(wb, ws, "Report");
// 두 번째 arg에는 export 될 파일의 이름을 넣어주면 된다.
writeFile(wb, `Report_${dayjs(new Date()).format("YYYY-MM-DD")}.xlsx`);
// Export될 데이터를 담았던 Array 초기화 해주기
setExportArr([]);
}
return (
<>
<button onClick={ExportHandler}>Export</button>
</>
)}