Comment exporter une table html en tant que fichier xlsx

J'ai une question sur l'exportation d'une table html en tant que fichier xlsx . J'ai fait du travail et maintenant je peux l'exporter en tant que xls , mais j'ai besoin de l'exporter en tant que 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 mes 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>

Vous ne pourrez pas l'exporter en tant que XLSX sans retourner au serveur. Un fichier XLSX est une collection de fichiers XML, zippés ensemble. Cela signifie que vous devez créer plusieurs fichiers. Ceci 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 alors créer le fichier XLSX pour vous (il y a un tas de libs disponibles pour cela!) Et le renvoyer au client pour le télécharger.

Si vous prévoyez avoir un ensemble de données énorme, la création XLSX sur le serveur doit être effectuée en tant que processus asynchrone, où vous informez l'utilisateur lorsqu'il est terminé (au lieu de demander à l'utilisateur d'attendre que le fichier soit créé).

Faites-nous savoir quelle langue vous utilisez sur votre serveur, et nous serons en mesure de vous recommander de bonnes bibliothèques.

Un excellent outil côté client pour exporter des tables html vers xlsx , xls , csv ou txt est TableExport by clarketm ( me ). Il s'agit d'une bibliothèque simple, facile à mettre en œuvre, complète avec beaucoup de propriétés et de 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

TableExport + RequireJS
TableExport + Flask
TableExport + Webpack 1
TableExport + Angular 4 + Webpack 2

Vérifiez les documents TableExport ou TableExport simplement à TableExport sur Github pour obtenir une liste complète des fonctionnalités.

Alerte Spoiler: le support pdf fera partie de la prochaine version

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>

Vous pouvez utiliser ce plug-in pour exporter le tableau vers .xlsx

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