Javascript 바닐라JS에서 Excel 사용하기 (sheetJS 예제)

 

이번에 순수 Javascript에서 (Vanilla Javascript) 엑셀 쓰는 라이브러리가 필요했다.

 

널리 쓰이는듯 한 sheetJs를 이용하여 간단한 예제를 작성해보았다.

 

sheetJs

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

Sample1.js (데이터 생성 및 저장)

// Excel에 입력할 값은 다양한 형식으로 사용 가능하며,
// 시트를 만들 때(데이터를 넣을 때) 형식에 맞는 함수를 사용해 주면 된다.
// 아래 data는 단순 예시.
let data = [
            {
                key1: 'value1_1',
                key2: 'value1_2',
            }, 
            {
                key1: 'value2_1',
                key2: 'value2_2',
            },
            ...
        ];

const excel = async (data) => {
    // 1. workbook 생성
    let wb = XLSX.utils.book_new();
    // 2. 시트 만들기 : json 방식 data 가공, 공식 doc에 다양한 방식 지원 확인 가능
    let sheet = await XLSX.utils.json_to_sheet(data);
    // 3. workbook에 시트 설정 : 생성한 wb, 생성한 sheet, 시트명
    XLSX.utils.book_append_sheet(wb, sheet, 'sheetName1');
    // 4. excel 파일 만들기
    let excelWrite = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
    // 5. 파일 내보내기
    XLSX.writeFile(wb, "result.xlsx", { compression: true });
}

 

위 방식으로 생성 및 저장 결과

데이터를 불러와(엑셀을 불러와) 사용하는 경우는 어찌해야할까?

 

엑셀 데이터를 불러와 활용하는 방법은 다음과 같다.

 

Sample2.js (엑셀 데이터 불러오기)

const excelRead = async () => {
    console.log("::FileRead::");
    // 1. 파일 불러오기.
    //  - fileName(id)이라는 inputbox에서 값을 불러오게 만들었다.
    //  - 사실상 경로만 맞추어 주면 된다. (수정하여 사용하면 된다.)
    const dir = './';
    const fileName = document.querySelector('#fileName').value;
    const extension = '.xls';
    const inputFileName = dir + fileName + extension;

    // 파일 읽기
    const res = await fetch(inputFileName);
    const buffer = await res.arrayBuffer();

    // 2. workbook 생성
    const wb = XLSX.read(buffer, {type: 'array'});
    
    // 3. 첫 번째 시트 불러오기
    // wb.SheetNames : 시트 리스트 불러오기
    // [0] : 첫 번째 시트만 사용
    let sheet = wb.Sheets[wb.SheetNames[0]];
    
    // 4. 첫 번째 시트의 row 들고오기
    const rows = XLSX.utils.sheet_to_row_object_array(sheet);
    console.log("::rows::", rows);
    
    // row.ID : row.컬럼이름
    // 사용할 컬럼을 뽑아 활용하면 된다.
    for(let row of rows) { console.log(row.ID); }
    console.log("::FileRead DONE::");
}

 

+ 추가

 - sheetJs의 컬럼 너비 설정 추가

 - 기본적으로 숫자 데이터를 넣으면 텍스트가 아닌 숫자 형식으로 데이터가 들어가는데, 엑셀 숫자 형식이 일정 길이를 넘어가는 경우 자동으로 지수 형식으로 변형된다. 해당 현상을 방지하기 위해 컬럼 숫자 형을 문자열로 변경하는 방법을 추가함.

/**
 * 엑셀 다운로드
 */
function downloadExcel() {
  // 1. workbook 생성
  const wb = XLSX.utils.book_new();

  // 2. 시트 만들기, * fullData << 데이터 형식을 맞춰서 넣어주어야 함!!
  const sheet = XLSX.utils.json_to_sheet(fullData);

  // 문자열로 변경 (숫자는 일정 자릿수를 넘어가면 변형되기 떄문에)
  for (const key in sheet) { sheet[key]['t'] = 's'; }
  // 컬럼 너비 설정
  const colWidth = [
    { width: 11.2 },
    { width: 20 },
    { width: 14.3 },
    { width: 6.8 },
    { width: 82 },
    { width: 6.2 },
    { width: 6.2 },
    { width: 6.2 },
    { width: 4.4 },
    { width: 4.4 },
  ];
  sheet["!cols"] = colWidth;

  // 3. workbook에 시트 설정
  XLSX.utils.book_append_sheet(wb, sheet, 'sheet1');
  // 4. excel 파일 만들기
  XLSX.write(wb, { bookType: 'xlsx', type: 'base64' });
  // 5. 파일 내보내기
  XLSX.writeFile(wb, `현장처리_첨부파일.xlsx`, { compression: true });
}

 

 

---

https://docs.sheetjs.com/docs/

Overview | SheetJS Community Edition