자바스크립트를 사용하여 웹 테이블을 Excel로 변환하는 방법-프런트엔드 Q&A-php.cn

자바스크립트를 사용하여 웹 테이블을 Excel로 변환하는 방법

PHPz

풀어 주다： 2023-04-24 16:32:41

원래의

1387명이 탐색했습니다.

비즈니스 관리 및 데이터 분석에 스프레드시트가 널리 사용됨에 따라 웹 테이블을 Excel 형식으로 변환하려는 요구도 증가하고 있습니다. JavaScript의 강력한 기능과 크로스 플랫폼 특성으로 인해 이 기능을 구현하는 것이 최선의 선택입니다. JavaScript를 사용하여 웹 테이블을 Excel로 변환하는 방법은 다음과 같습니다.

1.JavaScript 라이브러리 소개

먼저 필요한 JavaScript 라이브러리인 SheetJS와 FileSaver를 소개해야 합니다. SheetJS는 Excel, CSV 및 기타 스프레드시트 형식을 읽고 쓸 수 있는 강력한 스프레드시트 처리 라이브러리입니다. FileSaver 라이브러리는 브라우저에서 생성된 HTML 또는 바이너리 데이터를 저장하는 간단한 방법을 제공합니다. 이 두 라이브러리를 소개하려면 HTML 파일에 다음 코드를 추가하세요.

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

로그인 후 복사

2. 테이블 HTML 코드 만들기

다음으로 데이터를 표시하기 위해 HTML 페이지에 테이블을 만들어야 합니다. 여기서는 헤더와 데이터가 포함된 간단한 테이블을 만듭니다.

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>40</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

로그인 후 복사

3. JavaScript 코드 작성

이제 표를 Excel로 변환하는 기능을 구현하는 JavaScript 코드 작성을 시작합니다.

먼저 테이블을 가져와야 합니다. document.getElementById() 메서드를 사용하여 ID가 "table"인 테이블 요소를 가져옵니다.

const table = document.getElementById('table');

로그인 후 복사

그런 다음 table.rows를 통해 테이블의 행과 열 수를 가져오고 빈 배열을 만들어 테이블 데이터를 저장합니다.

const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

로그인 후 복사

그런 다음 테이블의 모든 행과 열을 순회하고 셀 텍스트 데이터를 데이터 배열에 저장해야 합니다. 이는 이중 루프를 사용하여 달성됩니다.

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

로그인 후 복사

마지막으로 SheetJS 라이브러리를 사용하여 데이터를 Excel 형식의 바이너리 데이터로 변환하고 FileSaver 라이브러리를 사용하여 로컬에 저장합니다. 이는 SheetJS의 XLSX.writeFile() 메서드를 사용하여 구현됩니다.

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

로그인 후 복사

전체 JavaScript 코드는 다음과 같습니다.

const table = document.getElementById('table');
const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

로그인 후 복사

4. 변환 결과 테스트

위 단계를 완료한 후 브라우저에서 HTML 파일을 열고 버튼을 클릭하면 "table.xlsx"라는 Excel 파일이 생성됩니다. 자동으로 다운로드됩니다.

위 단계를 통해 웹 테이블을 엑셀 형식으로 성공적으로 변환했습니다. 이 방법은 JavaScript를 기반으로 하며 구현이 간단하고 효율성이 높으며 크로스 플랫폼이 가능합니다. 이는 의심할 여지 없이 비즈니스 관리자와 데이터 분석가에게 적합한 도구입니다.

위 내용은 자바스크립트를 사용하여 웹 테이블을 Excel로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!