web-dev-qa-db-fra.com

Comment exporter une table HTML en tant que fichier xlsx

J'ai une question sur l'exportation d'un tableau html en tant que fichier xlsx. J'ai travaillé et je peux maintenant l'exporter au format xls, mais je dois l'exporter au format xlsx. 

ici mon jsFiddle:https://jsfiddle.net/272406sv/1/

ici mon html:

<table id="toExcel" class="uitable">
  <thead>
    <tr>
      <th>Kampanya Başlığı</th>
      <th>Kampanya Türü</th>
      <th>Kampanya Başlangıç</th>
      <th>Kampanya Bitiş</th>
      <th style="text-align: center">Aksiyonlar</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="Item in campaign.campaignList">
      <td> Item.CampaignTitle </td>
      <td> Item.CampaignHotelType </td>
      <td> Item.CampaignHotelCheckInDate) </td>
      <td>Item.CampaignHotelCheckOutDate</td>
      <td style="text-align: center">
        <button> Some Action </button>
      </td>
    </tr>
  </tbody>
</table>

<button onclick="exceller()">Excel</button>

ici mon js:

<script>
  function exceller() {
    var uri = 'data:application/vnd.ms-Excel;base64,',
      template = '<html xmlns:o="urn:schemas-Microsoft-com:office:office" xmlns:x="urn:schemas-Microsoft-com:office:Excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
      base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
      },
      format = function(s, c) {
        return s.replace(/{(\w+)}/g, function(m, p) {
          return c[p];
        })
      }
    var toExcel = document.getElementById("toExcel").innerHTML;
    var ctx = {
      worksheet: name || '',
      table: toExcel
    };
    var link = document.createElement("a");
    link.download = "export.xls";
    link.href = uri + base64(format(template, ctx))
    link.click();
  }

</script>
javascriptexcelhtml-tablexlsxlsx
4
Erdeniz Korkmaz

Vous ne pourrez pas l'exporter au format XLSX sans revenir au serveur. Un fichier XLSX est une collection de fichiers XML, compressés ensemble. Cela signifie que vous devez créer plusieurs fichiers. C'est impossible à faire avec JS, côté client.

Au lieu de cela, vous devez créer une fonction récupérant les données de votre table HTML et l’envoyer à votre serveur. Le serveur peut ensuite créer le fichier XLSX à votre place (de nombreuses bibliothèques sont disponibles pour cela!) Et le renvoyer au client pour téléchargement.

Si vous vous attendez à disposer d'un ensemble de données volumineux, la création de XLSX sur le serveur doit être effectuée comme un processus asynchrone, dans lequel vous informez l'utilisateur quand c'est fait (au lieu d'attendre que le fichier soit créé).

Indiquez-nous la langue que vous utilisez sur votre serveur et nous pourrons vous recommander de bonnes bibliothèques.

4
Adrien

Un outil great côté client permettant d'exporter des tables html vers xlsx, xls, csv ou txt est TableExport by clarketm (moi). Il s’agit d’une bibliothèque complète, simple, facile à mettre en œuvre et dotée de nombreuses propriétés et méthodes configurables.

Installer

$ npm install tableexport

Usage

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Documentation

Exemples d'applications pour vous aider à démarrer

Consultez la compilation docs ou rendez-vous simplement sur TableExport sur Github pour obtenir une liste complète des fonctionnalités.

6
Travis Clarke

Vous pouvez utiliser ce plug-in pour exporter une table au format .xlsx

http://sheetjs.com/demos/table.html

1
L..

Jetez un coup d'oeil à tableExport.jquery.plugin ou tableexport.jquery.plugin

Exemple de code

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../lib/js-xlsx/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../lib/FileSaver/FileSaver.min.js"></script> 
    <script type="text/javascript" src="../lib/html2canvas/html2canvas.min.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>
    <script type="text/javaScript">         
        var sFileName = 'ngophi';
        function ExportXLSX(){
            $('#Event').tableExport({fileName: sFileName,
                        type: 'xlsx'
                       });
        }
    </script>
 <style type="text/css">
     body {
        font-size: 12pt;
        font-family: Calibri;
        padding : 10px;
    }
    table {
        border: 1px solid black;
    }
    th {
        border: 1px solid black;
        padding: 5px;
        background-color:grey;
        color: white;
    }
    td {
        border: 1px solid black;
        padding: 5px;
    }
    input {
        font-size: 12pt;
        font-family: Calibri;
    }
 </style>
</head>
<body>  
<a href="#" onClick="ExportXLSX();">DownloadXLSX</a> 
<br/>
<br/>
<div id="Event">
    <table>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
1
Mr.Ngo