엑셀을 자바스크립트로 가져오는 방법

Excel은 데이터 처리를 할 때 매우 일반적으로 사용되는 도구이지만 일반적으로 컴퓨터에서만 사용할 수 있습니다. 웹 페이지에서 Excel 데이터를 사용하고 표시하기 위해 Excel 파일을 JavaScript로 가져와서 작업하고 표시할 수 있습니다. 이 기사에서는 Excel을 JavaScript로 가져오는 방법을 소개합니다.

1. 엑셀 데이터 유형

우선 엑셀의 데이터 유형을 이해해야 합니다. Excel에는 다음과 같은 데이터 유형이 있습니다.

1. 부울 값: TRUE 및 FALSE(1과 0도 사용할 수 있음).
2. 숫자 값: 소수 및 음수를 포함한 모든 숫자.
3. 날짜 및 시간: Excel은 특정 형식을 사용하여 날짜 및 시간 정보를 표시합니다.
4. 문자열: 모든 텍스트, 숫자 및 특수 문자를 포함할 수 있습니다.

2. Excel 파일을 JSON 형식으로 변환

Excel 테이블을 JavaScript로 가져오는 가장 일반적인 방법은 JavaScript에서 테이블을 JSON 형식으로 변환하는 것입니다. 다음은 Excel 테이블의 예입니다.

위 표를 JSON 형식으로 변환하면 코드는 다음과 같습니다.

[
  {"姓名": "John", "年龄": 25, "职业": "工程师"},
  {"姓名": "Mary", "年龄": 30, "职业": "教师"},
  {"姓名": "Mike", "年龄": 35, "职业": "律师"},
  {"姓名": "Lisa", "年龄": 40, "职业": "医生"}
]

따라서 라이브러리를 사용하여 구문 분석해야 합니다. Excel 파일을 JSON 형식 개체로 변환합니다. SheetJS, Papa Parse 등과 같은 라이브러리가 많이 있습니다. 여기서는 SheetJS가 사용됩니다.

3. SheetJS 라이브러리를 사용하여 Excel을 JavaScript로 가져옵니다

SheetJS 라이브러리를 사용하려면 먼저 관련 JS 파일을 HTML 파일에 도입해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/FileSaver.min.js"></script>

다음으로 Excel 파일을 변환하는 코드를 작성해야 합니다. JSON 형식으로:

var oReq = new XMLHttpRequest();
oReq.open("GET", "data.xlsx", true);  // data.xlsx为Excel文件名
oReq.responseType = "arraybuffer";  // 二进制数据流
oReq.onload = function(e) {
  var arraybuffer = oReq.response;
  var data = new Uint8Array(arraybuffer);
  var workbook = XLSX.read(data,{type:"array"});  // 读取Excel文件
  var first_sheet_name = workbook.SheetNames[0];  // 获取第一个sheet的名称
  var worksheet = workbook.Sheets[first_sheet_name];  // 获取第一个sheet对象
  var result = XLSX.utils.sheet_to_json(worksheet);  // 将sheet对象转换为JSON格式
};
oReq.send();

이 시점에서 Excel 데이터를 JavaScript로 가져오고 JSON 형식으로 변환하는 데 성공했습니다. 다음으로 데이터를 조작하고 표시할 수 있습니다.

4. Excel 데이터 조작 및 표시

JSON 형식의 Excel 데이터를 사용하여 다양한 작업 및 표시를 수행할 수 있습니다. 예를 들어 테이블을 만듭니다. 다음은 간단한 예입니다.

HTML 코드:

<table id="excel_table" border="1"></table>

JavaScript 코드:

var table = document.getElementById('excel_table');
for (var i = 0; i < result.length; i++) {
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = result[i].姓名;
  cell2.innerHTML = result[i].年龄;
  cell3.innerHTML = result[i].职业;
}

위 코드는 Excel 데이터를 HTML 테이블에 삽입합니다.

또한 HighCharts, D3.js 등과 같은 다양한 JavaScript 차트 라이브러리를 사용하여 데이터를 표시할 수도 있습니다.

5. 결론

위의 방법을 통해 Excel 데이터를 JavaScript로 쉽게 가져와서 작업하고 표시할 수 있습니다. 이는 데이터 처리의 효율성을 향상시킬 뿐만 아니라 데이터의 더 나은 표현과 상호 작용을 가능하게 합니다.

위 내용은 엑셀을 자바스크립트로 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!