Comment exporter des tableaux vers Excel à partir d'une page web. Je veux que l'exportation contienne tout le formatage et les couleurs.
De loin, l'exportation la plus propre et la plus facile des tableaux vers Excel est la suivante Plugin Jquery DataTables Table Tools. Vous obtenez une grille qui trie, filtre, ordonne et met en page vos données, et avec seulement quelques lignes de code supplémentaires et deux petits fichiers inclus, vous obtenez l'exportation vers Excel, PDF, CSV, vers le presse-papiers et vers l'imprimante.
C'est tout le code qui est nécessaire :
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
} );Ainsi, le déploiement est rapide, il n'y a pas de limitation de navigateur, aucun langage côté serveur n'est requis et, surtout, il est très FACILE à comprendre. C'est du tout cuit. La seule chose sur laquelle il a des limites, cependant, est le formatage strict des colonnes.
Si le formatage et les couleurs sont des problèmes absolus, la seule méthode fiable à 100 % et inter-facteurs que j'ai trouvée consiste à utiliser un langage côté serveur pour traiter les fichiers Excel à partir de votre code. Ma solution de prédilection est PHPExcel C'est le seul que j'ai trouvé jusqu'à présent qui gère positivement l'exportation avec mise en forme vers une version MODERNE d'Excel à partir de n'importe quel navigateur lorsque vous ne lui donnez que du HTML. Permettez-moi de préciser qu'il n'est pas aussi facile que la première solution et qu'il est un peu gourmand en ressources. Cependant, le côté positif de cette solution est qu'elle peut également produire directement des fichiers PDF. Et, une fois que vous l'avez configurée, elle fonctionne, à chaque fois.
MISE À JOUR - 15 septembre 2016 : TableTools a été abandonné au profit d'un nouveau plugin appelé " boutons " Ces outils remplissent les mêmes fonctions que l'ancienne extension TableTools, mais sont beaucoup plus faciles à installer et utilisent des téléchargements HTML5 pour les navigateurs modernes, avec la possibilité de revenir au téléchargement Flash original pour les navigateurs qui ne prennent pas en charge la norme HTML5. Comme vous pouvez le voir dans les nombreux commentaires depuis que j'ai posté cette réponse en 2011, la principale faiblesse de TableTools a été traitée. Je ne peux toujours pas recommander assez DataTables pour gérer simplement de grandes quantités de données, tant pour le développeur que pour l'utilisateur.
DataTables est entièrement en Javascript. Seul l'élément TableTools utilise Flash, et il est minuscule. Je n'utiliserais JAMAIS volontairement Flash dans un de mes produits !
Je comprends, et je suis d'accord. Mais il n'en reste pas moins que - même s'il est minuscule - il y a là un objet .swf, et il ne peut pas fonctionner sans Flash.
Il y a longtemps, j'ai découvert qu'Excel ouvrait un fichier HTML avec un tableau si on l'envoyait avec le type de contenu Excel. Considérons le document ci-dessus :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Friends</title>
</head>
<body>
<table style="font-weight: bold">
<tr style="background-color:red"><td>a</td><td>b</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</body>
</html>J'ai lancé le bookmarklet suivant dessus :
javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);et en fait, j'ai pu le télécharger sous forme de fichier Excel. Cependant Je n'ai pas obtenu le résultat escompté : le fichier a été ouvert dans OpenOffice.org Writer. C'est là mon problème : je n'ai pas Excel sur cette machine et je ne peux donc pas mieux essayer. De plus, cette astuce a fonctionné il y a plus ou moins six ans avec des navigateurs plus anciens et une ancienne version de MS Office, je ne peux donc pas vraiment dire si elle fonctionnera aujourd'hui.
Quoi qu'il en soit, dans le document ci-dessus, j'ai ajouté un bouton qui permet de télécharger l'ensemble du document sous forme de fichier Excel, en théorie :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Friends</title>
</head>
<body>
<table style="font-weight: bold">
<tr style="background-color:red"><td>a</td><td>b</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr>
<td colspan="2">
<button onclick="window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);">
Get as Excel spreadsheet
</button>
</td>
</tr>
</table>
</body>
</html>Enregistrez-le dans un fichier et cliquez sur le bouton. Je amour pour savoir si ça a marché ou pas, donc je vous demande de commenter même pour dire que ça n'a pas marché.
J'ai essayé et le résultat était un excel normal avec tout le html de la table comme texte dans la première cellule... mais l'idée est bonne néanmoins... j'avais juste besoin de quelque chose comme ça (mais qui fonctionne :P)...
Its strange though that comparing the excel content with one exported as excel from asp.net the content is the same except the one exported with your function removed the spaces between attributes if else it would work fine :S exemple : <tableid="table "class="tableresult "style="width:100%"border="0"><tbody><trid="TableRow1"><thid="cab">... Si je crée une alerte avec le même tableelement.outerhtml, elle s'affiche bien avec ses espaces...
Je l'ai fait fonctionner en ajoutant un remplacement à la fin : window.open('data:application/vnd.ms-excel,' + document.getElementByID('table').outerHTML.replace(/ /g, '%20')) ;
Il est possible d'utiliser l'ancien Format XML d'Excel 2003 (avant OpenXML) pour créer une chaîne de caractères contenant le XML souhaité, puis, du côté client, vous pouvez utiliser un URI de données pour ouvrir le fichier en utilisant le type de mime XSL, ou envoyer le fichier au client en utilisant le mimetype Excel "Content-Type : application/vnd.ms-excel" du côté serveur.
Ouvrez Excel et créez une feuille de calcul avec le formatage et les couleurs que vous souhaitez.
Enregistrez le classeur Excel sous le nom de "XML Spreadsheet 2003 (*.xml)".
Ouvrez le fichier résultant dans un éditeur de texte comme le bloc-notes et copiez la valeur dans une chaîne de caractères de votre application.
En supposant que vous utilisiez l'approche côté client avec une uri de données, le code ressemblerait à ceci :
<script type="text/javascript">
var worksheet_template = '<?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+
'<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+
'<ss:Table>{{ROWS}}</ss:Table></ss:Worksheet></ss:Workbook>';
var row_template = '<ss:Row ss:StyleID="1"><ss:Cell><ss:Data ss:Type="String">{{name}}</ss:Data></ss:Cell></ss:Row>';
</script>Vous pouvez ensuite utiliser le remplacement de chaînes pour créer une collection de lignes à insérer dans votre modèle de feuille de calcul.
<script type="text/javascript">
var rows = document.getElementById("my-table").getElementsByTagName('tr'),
row_data = '';
for (var i = 0, length = rows.length; i < length; ++i) {
row_data += row_template.replace('{{name}}', rows[i].getElementsByTagName('td')[0].innerHTML);
}
</script>Une fois les informations collectées, créez la chaîne finale et ouvrez une nouvelle fenêtre en utilisant l'URI des données.
<script type="text/javascript">
var worksheet = worksheet_template.replace('{{ROWS}}', row_data);Il convient de noter que les anciens navigateurs ne prennent pas en charge le schéma URI de données. Vous devrez donc peut-être produire le fichier côté serveur pour les navigateurs qui ne le prennent pas en charge.
Vous pouvez également avoir besoin d'effectuer un encodage base64 sur le contenu de l'URI des données, ce qui peut nécessiter un fichier de type bibliothèque js ainsi que l'ajout de la chaîne ';base64' après le type de mime dans l'URI des données.
Bien qu'il soit agréable d'utiliser OpenXML, cette solution ne fonctionnera pas sur les tableaux avec colspans ou rowspans sans beaucoup de travail sur le générateur javascript.
Merci de m'avoir appris quelque chose plutôt que de me dire d'utiliser un plugin, très apprécié. Il est intéressant de noter que cette approche fonctionne toujours très bien aujourd'hui.
Intéressant, j'ai essayé cette approche. J'obtiens juste l'ensemble du <?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+'<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+'<ss:Table> avec mes chaînes écrites dans une cellule, y compris toutes les lignes dans une cellule. Que me manque-t-il ?
Excel dispose d'une fonction peu connue appelée "Requêtes Web" qui vous permet de récupérer des données à partir de presque toutes les pages Web sans programmation supplémentaire.
Une requête web exécute essentiellement une demande HTTP directement à partir d'Excel et copie une partie ou la totalité des données reçues (et éventuellement le formatage) dans la feuille de calcul.
Après avoir défini la requête web, vous pouvez la rafraîchir à tout moment sans même quitter excel. Il n'est donc pas nécessaire d'"exporter" réellement les données et de les enregistrer dans un fichier - vous préférez rafraîchir les données comme dans une base de données.
Vous pouvez même utiliser les paramètres URL en demandant à Excel de vous demander certains critères de filtrage, etc...
Cependant, les inconvénients que j'ai remarqués jusqu'à présent sont les suivants :
Ici est une question sur la façon de créer des requêtes web dans Excel. Elle renvoie à un Site d'aide de Microsoft : Comment obtenir des données externes à partir d'une page Web ?
Il s'agit d'un php mais vous pouvez peut-être le changer en javascript :
<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<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\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
$fname = "Export".time().".xls";
$file = fopen($fname,"w+");
fwrite($file,$excel);
fclose($file);
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment; filename="'.basename($fname).'"');
readfile($fname);
unlink($fname); ?> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
9 votes
Le moyen le plus simple est probablement d'exporter un document HTML, qu'Excel peut ouvrir.
0 votes
@Pekka J'ai essayé, mais le formatage, la taille des colonnes, etc. sont perdus.
3 votes
@user où déclarez-vous la taille des colonnes et autres ? Je ne suis pas très familier avec l'exportation de données vers Excel, mais il se peut que vous deviez les déclarer en ligne, c'est-à-dire
<td style="background-color: ...0 votes
@user - il y a au moins deux problèmes différents ici : 1) le formatage des données pour qu'elles s'affichent correctement dans Excel, et 2) l'exportation des données à l'aide de Javascript pour qu'il définisse correctement le type de message et invite l'utilisateur à enregistrer le fichier. Essayez-vous de résoudre ces deux problèmes ?
0 votes
@user, avez-vous trouvé une solution qui répond à la question ? Si oui, pouvez-vous accepter ?
0 votes
Il suffit de sélectionner le tableau html d'entrée et de le faire glisser vers excel. si le html est valide, alors tout doit fonctionner. Comme ici mrkent.com/outils/convertisseur/index.htm (si vous avez besoin d'une méthode automatisée, ce n'est pas une solution).
10 votes
Pourquoi cela a-t-il été considéré comme "fondé sur une opinion" ? Il s'agit d'une question technique très simple.
0 votes
Je vous suggère d'aller voir TableExport . Il s'agit d'un plugin simple, facile à mettre en œuvre pour exporter des tableaux HTML vers
xlsx,xls,csvytxtfichiers. Il fonctionne également dans tous les principaux navigateurs.0 votes
tableexport.v4.travismclarke.com