So übertragen Sie HTML nach Excel

Für die Übertragung von HTML nach Excel sind bestimmte Codebeispiele erforderlich.

Einführung:
Bei der tatsächlichen Arbeit müssen wir manchmal Daten auf Webseiten in das Excel-Format exportieren. HTML ist eine gängige Web-Markup-Sprache, während Excel eine häufig verwendete Tabellenkalkulationssoftware ist. Die Formate der beiden sind unterschiedlich, daher ist eine Konvertierung erforderlich. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und Bibliotheken von Drittanbietern die Funktion zum Übertragen von HTML in Excel-Dateien realisieren und spezifische Codebeispiele angeben.

1. Verwenden Sie JavaScript, um HTML nach Excel zu übertragen.

1. Erstellen Sie eine HTML-Tabelle.
   Zuerst müssen wir eine Tabelle in HTML erstellen und die zu exportierenden Daten in die Tabelle einfügen. Hier ist zum Beispiel eine Tabelle mit drei Zeilen und drei Spalten:

<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. Exportschaltfläche und Ereignis-Listener hinzufügen
   Fügen Sie eine Schaltfläche in HTML hinzu, die das Exportereignis auslöst, wenn auf die Schaltfläche geklickt wird. Schaltflächen können wie folgt hinzugefügt werden:

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

Als nächstes müssen wir einen Ereignis-Listener für die Schaltfläche hinzufügen, um die Exportfunktion auszulösen. Verwenden Sie JavaScript, um den folgenden Code zu schreiben:

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

3. Implementieren Sie die Exportlogik und generieren Sie Excel-Dateien.
   Um die Exportlogik zu implementieren, können wir JavaScript verwenden, um den Inhalt der HTML-Tabelle in eine Excel-Datei zu konvertieren. In der exportierten Funktion müssen wir die folgenden Schritte ausführen:

(1) Erstellen Sie eine neue Excel-Arbeitsmappe:

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

(2) Durchlaufen Sie alle Zeilen und Spalten in der HTML-Tabelle und füllen Sie die Daten in das Excel-Arbeitsblatt Medium ein :

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) Speichern Sie die Excel-Datei:

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

Fügen Sie diese Codes zur Funktion „exportToExcel“ hinzu. Der vollständige Code lautet wie folgt:

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. Verwenden Sie eine Bibliothek eines Drittanbieters, um HTML nach Excel zu übertragen
In Zusätzlich zum nativen JavaScript können wir neben der Bedienung auch Bibliotheken von Drittanbietern verwenden, um die Funktion der Übertragung von HTML nach Excel zu realisieren, beispielsweise die Bibliothek „AlaSQL“. Das Folgende ist der spezifische Code für die Verwendung der AlaSQL-Bibliothek:

1. Stellen Sie die AlaSQL-Bibliothek und die ExcelJS-Bibliothek vor.
   Zunächst müssen wir die Skripte der AlaSQL-Bibliothek und der ExcelJS-Bibliothek in HTML einführen, die auf folgende Weise eingeführt werden können:

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

2. Ändern Sie die Exportfunktion
   In der Exportfunktion verwenden wir die Methode „alasql“ aus der AlaSQL-Bibliothek, um die HTML-Tabelle in eine Excel-Datei zu konvertieren. Ändern Sie den Code der exportierten Funktion wie folgt:

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. Schaltflächen und Ereignis-Listener hinzufügen
   Fügen Sie auf ähnliche Weise Schaltflächen und Ereignis-Listener in HTML hinzu:

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

Der vollständige Beispielcode für die HTML-Datei lautet wie folgt:

  
    
    
    
    
  
  
    

      

        
姓名
        
年龄
        
性别
      
      

        
张三
        
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>
  

Zusammenfassung :
Dieser Artikel stellt die Verwendung von JavaScript und Bibliotheken von Drittanbietern zum Übertragen von HTML in Excel-Dateien vor und enthält spezifische Codebeispiele. Mithilfe dieser Codes können wir die Daten auf der Webseite problemlos in das Excel-Format übertragen, um den Exportanforderungen in der tatsächlichen Arbeit gerecht zu werden. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonSo übertragen Sie HTML nach Excel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!