[vue.js] 엑셀(excel) 다운 기능 sheetjs 라이브러리 설치 및 사용 예제

서론

프론트에서 엑셀 다운로드를 해야할 일이 있어서 가장 많이 쓰이는 라이브러리 sheetJs를 정리할 예정입니다.

설치

npm i xlsx

소스

vue

async excelDown() {
    const xlsx = require('xlsx');
    // 엑셀 파일 생성
    const book = xlsx.utils.book_new();

    // data get > 실 개발시 api 호출
    const fruitDataByAoa = await this.getFruitDataByAoa();
    const fruitDataByJson = await this.getFruitDataByJson();

    // sheet 생성 - aoa_to_sheet 방식
    const worksheetByAoa = xlsx.utils.aoa_to_sheet(fruitDataByAoa);

    // sheet 생성 - json_to_sheet 방식
    const worksheetByJson = xlsx.utils.json_to_sheet(fruitDataByJson);

    // 엑셀 파일에 sheet set(엑셀파일, 시트데이터, 시트명)
    xlsx.utils.book_append_sheet(book, worksheetByAoa, 'aoa');
    xlsx.utils.book_append_sheet(book, worksheetByJson, 'json');

    // 엑셀 다운로드
    xlsx.writeFile(book, 'fruit.xlsx');
},
// aoa는 행열 데이터를 엑셀과 동일하게 get
getFruitDataByAoa() {
    let arr = [];
    arr.push(['이름', '칼로리', '지방', '탄수화물', '단백질', '철분']);
    arr.push(['바나나', '159', '6.0', '24', '4.0', '1']);
    arr.push(['사과', '237', '9.0', '37', '2.3', '4']);
    arr.push(['오렌지', '78', '1.2', '45', '1.1', '3.3']);
    return arr;
},
getFruitDataByJson() {
    let arr = [];
    arr.push({ 이름: '바나나', 칼로리: 159, 지방: 6.0, 탄수화물: 24, 단백질: 4.0, 철분: '1' });
    arr.push({ 이름: '사과', 칼로리: 237, 지방: 9.0, 탄수화물: 37, 단백질: 2.3, 철분: '4' });
    arr.push({ 이름: '오렌지', 칼로리: 78, 지방: 1.2, 탄수화물: 45, 단백질: 1.1, 철분: '3.3' });
    return arr;
}

설명

sheetjs에서 엑셀 시트에 데이터를 set 하는 방식은 여러가지가 있는데 내가 테스트한 부분은 aoa_to_sheet 와 json_to_sheet이다.

 

aoa_to_sheet

데이터를 엑셀 시트와 동일하게 2중 배열로 조합하여 set한다.

[

    ['이름', '칼로리', '지방', '탄수화물', '단백질', '철분'],
    ['바나나', '159', '6.0', '24', '4.0', '1'],
    ['사과', '237', '9.0', '37', '2.3', '4'],
    ['오렌지', '78', '1.2', '45', '1.1', '3.3']

]

 

json_to_sheet

데이터를 json형식으로 전달하여 set한다.

* header 이름은 별도로 set할수도 있다. header데이터가 없을시 key값이 자동으로 set.

[
    {
        "이름": "바나나",
        "칼로리": 159,
        "지방": 6,
        "탄수화물": 24,
        "단백질": 4,
        "철분": "1"
    },
    {
        "이름": "사과",
        "칼로리": 237,
        "지방": 9,
        "탄수화물": 37,
        "단백질": 2.3,
        "철분": "4"
    },
    {
        "이름": "오렌지",
        "칼로리": 78,
        "지방": 1.2,
        "탄수화물": 45,
        "단백질": 1.1,
        "철분": "3.3"
    }
]

테스트

 

 

* 테스트 소스는 https://github.com/hjh830827/test-project1/tree/dev - ExcelTestBySheetJs.vue 파일에서 확인 가능합니다.