Comment transférer du HTML vers Excel

Comment transférer du HTML vers Excel nécessite des exemples de code spécifiques

Introduction :
Dans le travail réel, nous devons parfois exporter des données de pages Web au format Excel. HTML est un langage de balisage Web courant, tandis qu'Excel est un tableur couramment utilisé. Les formats des deux sont différents, une conversion est donc nécessaire. Cet article expliquera comment utiliser JavaScript et des bibliothèques tierces pour réaliser la fonction de transfert de HTML vers des fichiers Excel et donnera des exemples de code spécifiques.

1. Utilisez JavaScript pour transférer du HTML vers Excel

1. Créez un tableau HTML
   Tout d'abord, nous devons créer un tableau en HTML et mettre les données à exporter dans le tableau. Par exemple, voici un tableau avec trois lignes et trois colonnes :

<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. Ajouter un bouton d'exportation et un écouteur d'événement
   Ajoutez un bouton en HTML qui déclenche l'événement d'exportation lorsque vous cliquez sur le bouton. Les boutons peuvent être ajoutés comme suit :

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

Ensuite, nous devons ajouter un écouteur d'événement pour que le bouton déclenche la fonction d'exportation. Utilisez JavaScript pour écrire le code suivant :

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

3. Implémentez la logique d'exportation et générez des fichiers Excel
   Pour implémenter la logique d'exportation, nous pouvons utiliser JavaScript pour convertir le contenu du tableau HTML en un fichier Excel. Dans la fonction exportée, nous devons effectuer les étapes suivantes :

(1) Créer un nouveau classeur Excel :

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

(2) Parcourez toutes les lignes et colonnes du tableau HTML et remplissez les données dans la feuille de calcul Excel Medium :

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) Enregistrez le fichier Excel :

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

Ajoutez ces codes à la fonction "exportToExcel", le code complet est le suivant :

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. Utilisez une bibliothèque tierce pour transférer du HTML vers Excel
Dans en plus de JavaScript natif En plus du fonctionnement, nous pouvons également utiliser des bibliothèques tierces pour réaliser la fonction de transfert de HTML vers Excel, comme la bibliothèque « AlaSQL ». Voici le code spécifique pour utiliser la bibliothèque AlaSQL :

1. Présentez la bibliothèque AlaSQL et la bibliothèque ExcelJS
   Tout d'abord, nous devons présenter la bibliothèque AlaSQL et les scripts de la bibliothèque ExcelJS en HTML, qui peuvent être introduits des manières suivantes :

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

2. Modifier la fonction d'export
   Dans la fonction d'export, nous utilisons la méthode "alasql" de la bibliothèque AlaSQL pour convertir le tableau HTML en fichier Excel. Modifiez le code de la fonction exportée comme suit :

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. Ajouter des boutons et des écouteurs d'événements
   De même, ajoutez des boutons et ajoutez des écouteurs d'événements en HTML :

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

L'exemple de code complet du fichier HTML est le suivant :

  
    
    
    
    
  
  
    

      

        
姓名
        
年龄
        
性别
      
      

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

Résumé :
Cet article explique comment utiliser JavaScript et des bibliothèques tierces pour transférer du HTML vers des fichiers Excel et donne des exemples de code spécifiques. Grâce à ces codes, nous pouvons facilement transférer les données de la page Web au format Excel pour répondre aux besoins d'exportation dans le travail réel. J'espère que cet article sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!