HTML을 Excel로 전송하는 방법

HTML을 Excel로 변환하려면 특정 코드 예제가 필요합니다.

소개:
실제 작업에서는 웹 페이지의 데이터를 Excel 형식으로 내보내야 하는 경우가 있습니다. HTML은 일반적인 웹 마크업 언어인 반면, Excel은 일반적으로 사용되는 스프레드시트 소프트웨어이므로 둘의 형식이 다르기 때문에 변환이 필요합니다. 이 기사에서는 JavaScript 및 타사 라이브러리를 사용하여 HTML을 Excel 파일로 전송하는 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. JavaScript를 사용하여 HTML을 Excel로 전송

1. HTML 테이블 만들기
   먼저 HTML로 테이블을 만들고 테이블에 내보낼 데이터를 넣어야 합니다. 예를 들어 다음은 3개의 행과 3개의 열이 있는 테이블입니다.

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

2. 내보내기 버튼 및 이벤트 리스너 추가
   버튼을 클릭할 때 내보내기 이벤트를 트리거하는 버튼을 HTML에 추가하세요. 버튼은 다음과 같이 추가할 수 있습니다.

<button onclick="exportToExcel()">导出Excel</button>

다음으로 내보내기 기능을 트리거하기 위해 버튼에 대한 이벤트 리스너를 추가해야 합니다. JavaScript를 사용하여 다음 코드를 작성합니다.

function exportToExcel() {
  // 导出表格逻辑
}

3. 내보내기 논리 구현 및 Excel 파일 생성
   내보내기 논리를 구현하려면 JavaScript를 사용하여 HTML 테이블의 콘텐츠를 Excel 파일로 변환할 수 있습니다. 내보낸 함수에서 다음 단계를 수행해야 합니다.

(1) 새 Excel 통합 문서 만들기:

var wb = new ExcelJS.Workbook();
var ws = wb.addWorksheet('Sheet 1');

(2) HTML 테이블의 모든 행과 열을 반복하고 Excel 워크시트에 데이터를 채웁니다. 중간 :

var rows = document.getElementById("myTable").rows;
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  for (var j = 0; j < cells.length; j++) {
    ws.getCell(i + 1, j + 1).value = cells[j].innerText;
    // 根据需要设置单元格样式
    ws.getCell(i + 1, j + 1).alignment = { horizontal: 'left' };
  }
}

(3) Excel 파일 저장:

wb.xlsx.writeBuffer().then(function(buffer) {
  saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'data.xlsx');
});

"exportToExcel" 함수에 다음 코드를 추가합니다. 전체 코드는 다음과 같습니다.

function exportToExcel() {
  var wb = new ExcelJS.Workbook();
  var ws = wb.addWorksheet('Sheet 1');

  var rows = document.getElementById("myTable").rows;
  for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      ws.getCell(i + 1, j + 1).value = cells[j].innerText;
      ws.getCell(i + 1, j + 1).alignment = { horizontal: 'left' };
    }
  }

  wb.xlsx.writeBuffer().then(function(buffer) {
    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'data.xlsx');
  });
}

2. 타사 라이브러리를 사용하여 HTML을 Excel로 전송합니다.
JavaScript 네이티브 작업 외에도 타사 라이브러리를 사용하여 "AlaSQL" 라이브러리와 같은 HTML을 Excel로 전송하는 기능을 실현할 수도 있습니다. 다음은 AlaSQL 라이브러리를 사용하기 위한 구체적인 코드입니다.

1. AlaSQL 라이브러리 및 ExcelJS 라이브러리 소개
   먼저 AlaSQL 라이브러리 및 ExcelJS 라이브러리의 스크립트를 HTML로 소개해야 하며, 이는 다음과 같은 방법으로 소개할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/alasql"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs"></script>

2. 내보내기 기능 수정
   내보내기 기능에서는 AlaSQL 라이브러리의 "alasql" 메서드를 사용하여 HTML 테이블을 Excel 파일로 변환합니다. 내보낸 함수의 코드를 다음과 같이 수정합니다.

function exportToExcel() {
  var tableData = [];
  var rows = document.getElementById("myTable").rows;
  for (var i = 0; i < rows.length; i++) {
    var rowData = [];
    var cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      rowData.push(cells[j].innerText);
    }
    tableData.push(rowData);
  }

  var opts = {
    sheetid: 'Sheet 1',
    headers: true,
    skipHeader: true
  };

  var res = alasql('SELECT * INTO XLSX("data.xlsx",?) FROM ?', [opts, [tableData]]);
}

3. 버튼 및 이벤트 리스너 추가
   마찬가지로 HTML에 버튼 추가 및 이벤트 리스너 추가:

<button onclick="exportToExcel()">导出Excel</button>

전체 HTML 파일 샘플 코드는 다음과 같습니다.

  
    
    
    
    
  
  
    

      

        
姓名
        
年龄
        
性别
      
      

        
张三
        
25
        
男
      
      

        
李四
        
30
        
女
      
    
  
    <button onclick="exportToExcel()">导出Excel</button>
    
    <script>
      function exportToExcel() {
        var tableData = [];
        var rows = document.getElementById("myTable").rows;
        for (var i = 0; i < rows.length; i++) {
          var rowData = [];
          var cells = rows[i].cells;
          for (var j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText);
          }
          tableData.push(rowData);
        }

        var opts = {
          sheetid: 'Sheet 1',
          headers: true,
          skipHeader: true
        };

        var res = alasql('SELECT * INTO XLSX("data.xlsx",?) FROM ?', [opts, [tableData]]);
      }
    </script>
  

요약 :
이 문서에서는 JavaScript 및 타사 라이브러리를 사용하여 HTML을 Excel 파일로 전송하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이러한 코드를 통해 웹 페이지의 데이터를 Excel 형식으로 쉽게 전송하여 실제 작업에서 내보내기 요구 사항을 충족할 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 HTML을 Excel로 전송하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!