[JS][Library] SheetJs 시작하기(1)

SheetJS 를 시작해보자…(1)

SheetJS 를 공부하게 되는 계기

물류회사 특성상 , 입고/ 출고/ 주문정보 등록을 엑셀로 작성하는 경우가 많다. 판매몰에서도 이러한 양식을 엑셀로 다운받을 수 있게 되어있다. 따라서 엑셀을 데이터화 하거나 데이터를 엑셀화 시킬 수 있는 것은 물류 개발자에게 있어서 필수역량이 되겠다. 나 또한 이런부분을 마스터하고 싶어서 오늘부터 공부에 들어간다. 간단하게 어떤식으로 되는지 알아보자.

Table to XLSX

/* The live editor requires this function wrapper */
function Table2XLSX(props) {
 /* Callback invoked when the button is clicked */
	const xport = React.useCallback(async () => {
/* Create worksheet from HTML DOM TABLE */
/* HTML DOM TABLE 을 가져온다.*/
		const table = document.getElementById("Table2XLSX");
/* table 을 worksheet 로 변환 */
		const wb = XLSX.utils.table_to_book(table);
/* Export to file (start a download) */
/* wb 와 파일이름을 arg 로 갖는다. */
		XLSX.writeFile(wb, "SheetJSTable.xlsx");
	});

	return (<>
		<table id="Table2XLSX">
			<tbody>
				<tr><td coldSpan="3">SheetJS Table Export</td><tr>
				<tr><td>Author</td><td>ID</td><td>Note</td></tr>
				<tr><td>SheetJS</td><td>7262</td><td>Hi!</td></tr>
				<tr><td coldSpan="3">
					<a href="//sheetjs.com">Powered by SheetJS</a></td><tr>
			</tbody></table>
			<button onClick={xport}><b>Export XLSX!</b></button>
			</>);
}

SheetJS 설치하기

$ npm install --save https://cdn.sheetjs.com/xlsx-0.18.9/xlsx-0.18.9.tgz

// Once installed, the library can be imported under the name "xlsx";
import { read, writeFileXLSX } from "xlsx";

Complete Example

Raw Data

The raw data is available in JSON form.

The data result is an Array of objects. This is the data for John Adams:

{
	"id":  {  /* (data omitted) */  },
		"name":  {
		"first":  "John",  // <-- first name
		"last":  "Adams"  // <-- last name
	},
	"bio":  {
		"birthday":  "1735-10-19",  // <-- birthday
		"gender":  "M"
	},
	"terms":  [
		{  "type":  "viceprez",  /* (other fields omitted) */  },
		{  "type":  "viceprez",  /* (other fields omitted) */  },
		{  "type":  "prez",  /* (other fields omitted) */  }
	]
}

Filtering for Presidents

The dataset includes Aaron Burr, a Vice President who was never President!

A President served at least one term with type set to "prez" 한번이라도 대통령을 했으면 type 에 “prez” 가 있을것이다.

const prez = raw_data.filter((row) =>
  row.terms.some((term) => term.type === "prez")
);
// data_row 하나 객체의 terms 의 타입이 prez 이 true 인것들만 모아서
// 새로운 배열을 만들었다 -> prez 배열

Array.prototype.some() 배열안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다. ℹ 빈 배열에서 호출하면 무조건 false 를 반환.

Reshaping the Array

For this example, the name will be the first name combined with the last name, and the birthday will be the subfield. The dataset can be massaged in one call:

const rows = prez.map((row) => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday,
}));

The result is an array of “simple” objects with no nesting:

	{name: "George Washington", birthday: "1732-02-22"},
	{name: "John Adams", birthday: "1735-10-19"},
	// ... one row per President
]

Create a Workbook

With the cleaned dataset, XLSX.utils.json_to_sheet generates a worksheet:

// 정제된 객체로 된 배열 rows 를 json_to_sheet 를 사용해 worksheet 를 만들어준다.
const worksheet = XLSX.utils.json_to_sheet(rows);

XLSX.utils.book_new creates a new workbook and XLSX.utils.book_append_sheet appends a worksheet to the workbook. The new worksheet will be called “Dates”:

// book_new() 를 사용해서 workbook 을 만들어준다.
const workbook = XLSX.utils.book_new();
// workbook, worksheet, sheet의 이름을 arg 로 갖는 book_append_sheet
//(영문 그대로 book 에다가 sheet 를 append 한다고 생각하면 이해가 훨씬 쉽다.)
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

Clean up Workbook

The data is in the workbook and can be exported.

There are multiple opportunities for improvement : the headers can be renamed and the column widths can be adjusted(조정). SheetJS Pro offers additional styling options like cell styling and frozen rows.

스타일이나 헤더를 바꾸는 건 SheetJS Pro 에서 가능하다.

Export a File

XLSX.writeFile creates a spreadsheet file and tries to write it to the system.

// 지금까지 만들었던 workbook (wb) 와, 엑셀파일 이름으로 파일을 만든다.
XLSX.writeFile(workbook, "Presidents.xlsx");

마치며

전체적인 SheetJS flow 를 정리해 보았다. 크게 어렵지 않았다. 데이터를 가공하고, 워크시트 만들고, 워크 북 만들고, 워크북에 워크시트 어펜드하고, 파일을 만들어주면 끝 ! 이었다. 실제로는 데이터가 더 복잡하고, 어떻게 엑셀에 표기해야할지도 생각해야 하기 때문에 더 어려울 것이다. 그것은 다음시간에 알아보자.

참조

SheetJS 공식홈페이지