[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

SpreadJS로 파일 가져오기

SpreadJS에서 파일을 가져오고 내보내는 단계를 설명합니다.

SpreadJS API 외에도 다음 메서드들이 사용됩니다:

Step 1: 스크립트 참조 추가

SpreadJS에서 가져오기/내보내기를 진행하기 위해 스크립트 파일과 CSS를 참조합니다.

// SpreadJS 스크립트와 CSS 추가
<script src="spreadjs/scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script src="spreadjs/scripts/gc.spread.sheets.io.x.x.x.min.js"></script>
<script src="spreadjs/demos/spread/source/js/FileSaver.js"></script>
<link href="spreadjs/css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />

Step 2: Spread 초기화

window.onload 함수를 사용해 SpreadJS를 초기화하고 파일 형식 매핑을 설정합니다.

또한, 파일 이름과 확장자를 분리해 파일 형식을 판별하는 getFileType 함수를 생성합니다.

window.onload = function () {
	const spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadjs_host"));
	const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
	// 파일 형식 가져오기
	function getFileType(fileName) {
		return fileName?.split(".").pop();
	}
};

Step 3: 파일 가져오기 (Import)

선택한 파일을 가져오기 위해 loadFile 함수를 생성합니다. 파일 형식을 확인한 뒤 spread.open 또는 spread.import 메서드를 사용하여 스프레드에 파일을 열거나 가져옵니다.

// 파일 불러오기
function loadFile(file) {
	const type = getFileType(file.name);
	const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

	if (type === fileTypeMap.sjs) {
		spread.open(file, () => console.log("SJS 파일 불러옴"), console.error);
	} else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
		spread.import(file, () => console.log("파일 불러옴"), console.error, { fileType });
	} else {
		console.error("지원되지 않는 파일 형식");
	}
}

Step 4: 파일 내보내기 (Export)

내보내기 과정을 관리하기 위해 exportFile 함수를 생성합니다. 선택한 내보내기 형식을 가져와 해당 형식으로 스프레드를 저장합니다.

// 파일 내보내기
function exportFile() {
	const type = document.getElementById('exportFileType').value;
	const fileName = `export.${type}`;
	const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

	if (type === fileTypeMap.sjs) {
		spread.save(blob => saveAs(blob, fileName), console.error);
	} else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
		spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
	}
}

Step 5: HTML 입력 요소 추가

다음 확장자를 가진 파일(.sjs, .xlsx, .ssjson)을 선택할 수 있도록 입력 파일 요소를 생성합니다. 그 후 File Type 이라는 드롭다운을 만들어 사용자가 .sjs(SJS), .xlsx(Excel), .ssjson(SSJson) 형식을 선택할 수 있게 합니다. 또한, 내보내기 기능을 실행하는 Export 버튼을 추가합니다. 마지막으로 spreadjs_host ID를 가진 <div> 요소를 생성하여 스프레드 컨트롤의 컨테이너 역할을 하게 합니다.

<body>
	<input id = "selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />

	<label for = "exportFileType">File Type:</label>
	<select id = "exportFileType">
		<option value = "xlsx">Excel</option>
		<option value = "ssjson">SSJson</option>
		<option value = "sjs">SJS</option>
	</select>
	<button id = "exportBtn">Export</button>

    <div id = "spreadjs_host" style = "width:100%; height:85vh; border:1px solid darkgray;"></div>
</body>

SpreadJS에서 파일을 가져오고 내보내는 전체 샘플 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>SpreadJS SJSIO Sample</title>
	<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
	<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.io.0.0.0.min.js"></script>
	<script src="https://developer.mescius.com/spreadjs/demos/spread/source/js/FileSaver.js"></script>
	<link href="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/css/gc.spread.sheets.excel2013white.0.0.0.css" rel="stylesheet" />

  <script>
	window.onload = function () {
		const spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadjs_host"));
		const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };

		function getFileType(fileName) {
			return fileName?.split(".").pop();
		}

		// 파일 불러오기
		function loadFile(file) {
			const type = getFileType(file.name);
			const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

			if (type === fileTypeMap.sjs) {
				spread.open(file, () => console.log("SJS 파일 불러옴"), console.error);
			} else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
				spread.import(file, () => console.log("파일 불러옴"), console.error, { fileType });
			} else {
				console.error("지원되지 않는 파일 형식");
			}
		}

		// 파일 내보내기
		function exportFile() {
			const type = document.getElementById('exportFileType').value;
			const fileName = `export.${type}`;
			const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

			if (type === fileTypeMap.sjs) {
				spread.save(blob => saveAs(blob, fileName), console.error);
			} else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
				spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
			}
		}

		document.getElementById('selectedFile').addEventListener("change", e => loadFile(e.target.files[0]));
		document.getElementById('exportBtn').addEventListener("click", exportFile);

		spread.getActiveSheet().setValue(0, 0, "Sample");
	};
  </script>
</head>

<body>
	<input id = "selectedFile" type = "file" accept=".sjs, .xlsx, .ssjson" />

	<label for = "exportFileType">File Type:</label>
	<select id = "exportFileType">
		<option value = "xlsx">Excel</option>
		<option value = "ssjson">SSJson</option>
		<option value = "sjs">SJS</option>
	</select>
	<button id = "exportBtn">Export</button>

	<div id = "spreadjs_host" style = "width:100%; height:85vh; border:1px solid darkgray;"></div>
</body>

</html>