Comment puis-je exporter des tableaux vers Excel à partir d'une page Web
Comment puis-je exporter des tableaux vers Excel à partir d'une page Web? Je veux que l'exportation contienne toute la mise en forme et les couleurs.
De loin, l’exportation la plus propre et la plus simple des tables vers Excel est plug-in Jquery DataTables Table Tools. Vous obtenez une grille qui trie, filtre, ordonne et met en page vos données, avec seulement quelques lignes supplémentaires de code et deux petits fichiers inclus, vous obtenez une exportation vers Excel, PDF, CSV, vers le presse-papier et vers l’imprimante.
C'est tout le code qui est requis:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
} );
Donc, rapide à déployer, aucune limitation de navigateur, aucun langage côté serveur requis, et surtout très facile à comprendre. C'est un gagnant-gagnant. La seule chose sur laquelle il a des limites, cependant, est la mise en forme stricte des colonnes.
Si le formatage et les couleurs sont des dealbreakers absolus, la seule méthode 100% fiable et multi-navigateurs que j'ai trouvée consiste à utiliser un langage côté serveur pour traiter les fichiers Excel appropriés à partir de votre code. Ma solution de choix est PHPExcel C’est la seule solution que j’ai trouvée jusqu’à présent qui gère positivement l’exportation avec le formatage vers une version MODERN d’Excel à partir de n’importe quel navigateur, lorsque vous ne lui donnez que du HTML. Permettez-moi de préciser, ce n'est certainement pas aussi facile que la première solution, et est également un peu une ressource de porc. Cependant, du côté positif, il peut également produire directement vers PDF. Et, une fois que vous l'avez configuré, cela fonctionne, à chaque fois.
UPDATE - 15 septembre 2016: TableTools a été abandonné au profit d'un nouveau plugin appelé " buttons ". Ces outils effectuent la mêmes fonctions que l'ancienne extension TableTools, mais sont beaucoup plus faciles à installer et utilisent les téléchargements HTML5 pour les navigateurs modernes, avec la possibilité de revenir au téléchargement Flash d'origine pour les navigateurs ne prenant pas en charge le standard HTML5. Comme vous pouvez le constater parmi les nombreux commentaires formulés depuis que j'ai posté cette réponse en 2011, les principales faiblesses de TableTools ont été corrigées. Je ne peux toujours pas recommander assez de DataTables pour gérer simplement de grandes quantités de données, à la fois pour le développeur et pour l'utilisateur.
Il y a longtemps, j'ai découvert qu'Excel ouvrirait un fichier HTML avec une table si nous l'envoyions avec le type de contenu Excel. Considérez 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:
javascript:window.open('data:application/vnd.ms-Excel,'+document.documentElement.innerHTML);
et en fait je l’ai téléchargeable sous forme de fichier Excel. Cependant, je n'ai pas obtenu le résultat attendu - le fichier était ouvert dans OpenOffice.org Writer. C’est mon problème: je n’ai pas d’Excel dans cette machine, je ne peux donc pas mieux l’essayer. En outre, cette astuce a fonctionné il y a plus ou moins six ans avec des navigateurs plus anciens et une version ancienne de MS Office. Je ne peux donc vraiment pas dire si cela fonctionnera aujourd'hui.
Quoi qu'il en soit, dans le document ci-dessus, j'ai ajouté un bouton permettant de télécharger l'intégralité 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. J'aimerais aimer savoir si cela a fonctionné ou non. Je vous demande donc de commenter même si vous avez dit que cela ne fonctionnait pas.
Il est possible d’utiliser l’ancien format XML Excel 20 (avant OpenXML) pour créer une chaîne contenant le code XML souhaité, puis du côté client, vous pouvez utiliser un URI de données pour ouvrir le fichier à l’aide du fichier XSL. type mime ou envoyez le fichier au client en utilisant le type MIME 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 souhaités.
- Enregistrez le classeur Excel en tant que "Tableur XML 2003 (* .xml)"
- Ouvrez le fichier résultant dans un éditeur de texte tel que le bloc-notes et copiez la valeur dans une chaîne de votre application.
- En supposant que vous utilisiez l'approche côté client avec une donnée, 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 chaîne de remplacement 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 à l'aide de l'URI de données.
<script type="text/javascript"> var worksheet = worksheet_template.replace('{{ROWS}}', row_data);
window.open('data:application/vnd.ms-Excel,'+worksheet); </script>
Il est à noter que les anciens navigateurs ne prennent pas en charge le schéma d'URI des données. Vous devrez donc peut-être générer le côté serveur de fichiers pour les navigateurs ne le prenant pas en charge.
Vous devrez peut-être également coder en base64 le contenu de l'URI des données, ce qui peut nécessiter une bibliothèque js , ainsi que l'ajout de la chaîne '; base64' après le type mime dans l'URI des données.
Excel possède une fonctionnalité peu connue appelée "requêtes Web" qui vous permet de récupérer des données de presque toutes les pages Web sans programmation supplémentaire.
Une requête Web exécute une requête HTTP directement à partir d’Excel et copie tout ou partie des données reçues (et éventuellement le formatage) dans la feuille de calcul.
Une fois la requête Web définie, vous pouvez l'actualiser à tout moment sans même quitter Excel. Vous n'avez donc pas besoin d'exporter des données et de les enregistrer dans un fichier; vous préférez actualiser les données comme si vous étiez dans une base de données.
Vous pouvez même utiliser les paramètres d'URL en vous faisant demander par Excel de vous indiquer certains critères de filtrage, etc.
Cependant les inconvénients que j'ai remarqués jusqu'à présent sont:
- les données chargées dynamiquement ne sont pas accessibles, car Javascript n'est pas exécuté
- La longueur de l'URL est limitée
Ici est une question sur la façon de créer des requêtes Web dans Excel. Il est lié à un site d’aide de Microsoft concernant l’obtention de données externes à partir d’une page Web
C'est 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); ?>
Tout d'abord, je ne recommanderais pas d'essayer l'exportation au format HTML et j'espère que l'instance utilisateur d'Excel le détectera. Selon mon expérience, cette solution pose de nombreux problèmes, notamment d’incompatibilités avec les clients Macintosh et jette une erreur à l’utilisateur que le fichier en question n’a pas le format spécifié. La solution la plus conviviale et la plus conviviale est une solution côté serveur, dans laquelle vous utilisez une bibliothèque pour créer un fichier Excel réel et le renvoyer à l'utilisateur. La solution suivante, meilleure et plus universelle, consisterait à utiliser le format Open XML. J'ai rencontré quelques problèmes de compatibilité rares avec les anciennes versions d'Excel, mais dans l'ensemble, cela devrait vous fournir une solution qui fonctionnera sous toutes les versions d'Excel, y compris les Mac.
mozilla prend toujours en charge les URI de base 64. Cela vous permet de composer dynamiquement le contenu binaire en utilisant javascript:
<a href="data:application/vnd.ms-Excel<base64 encoded binary Excel content here>"> download xls</a>
si votre fichier Excel n'est pas très sophistiqué (pas de diagrammes, de formules, de macros), vous pouvez creuser dans le format et composer les octets de votre fichier, puis les encoder avec base64 et les insérer dans le fichier href.
se référer à https://developer.mozilla.org/en/data_URIs
Hypothèses:
uRL donnée
la conversion doit être faite côté client
les systèmes sont Windows, Mac et Linux
Solution pour Windows:
code python qui ouvre la fenêtre ie et y a accès: la variable theurl contient l’url ('http: //')
ie = Dispatch("InternetExplorer.Application")
ie.Visible = 1
ie.Navigate(theurl)
Remarque: si la page n'est pas directement accessible, mais connectez-vous, vous devrez le gérer en saisissant les données du formulaire et en émulant les actions de l'utilisateur avec python.
voici l'exemple
from win32com.client import Dispatch
ie.Document.all('username').value=usr
ie.Document.all('password').value=psw
de la même manière pour la récupération des données d'une page Web. Disons que l'élément avec l'id 'el1' contient les données. récupérer le texte de l'élément dans la variable
el1 = ie.Document.all('el1').value
puis, lorsque les données sont dans la variable python, vous pouvez ouvrir l'écran Excel de manière similaire à l'aide de python:
from win32com.client import Dispatch
xlApp = Dispatch("Excel.Application")
xlWb = xlApp.Workbooks.Open("Read.xls")
xlSht = xlWb.WorkSheets(1)
xlSht.Cells(row, col).Value = el1
Solution pour Mac:
seulement le conseil: utilisez AppleScript - il a une API simple et similaire à celle de win32com.client Dispatch
Solution pour Linux:
Java.awt.Robot pourrait fonctionner pour cela, il faut cliquer, appuyer sur une touche (les touches de raccourci peuvent être utilisées), mais aucune API pour Linux dont je suis au courant ne peut fonctionner aussi simplement que AppleScript.
C'est en fait plus simple que vous ne le pensez: "Il suffit de copier le tableau HTML (c'est-à-dire: le code HTML du tableau) dans le presse-papiers. Excel sait décoder les tableaux HTML; ça va même essayer de préserver les attributs.
La partie difficile est de "copier le tableau dans le presse-papiers" car il n’existe aucun moyen standard d’accéder au presse-papiers à partir de JavaScript. Voir cet article de blog: Accéder au Presse-papiers du système avec JavaScript - Un Saint Graal?
Maintenant, tout ce dont vous avez besoin, c'est du tableau HTML. Je suggère jQuery et la méthode html () .
Ce code est uniquement IE, il n'est donc utile que dans les cas où vous savez que tous vos utilisateurs utiliseront IE (comme dans certains environnements d'entreprise, par exemple).
<script Language="javascript">
function ExportHTMLTableToExcel()
{
var thisTable = document.getElementById("tbl").innerHTML;
window.clipboardData.setData("Text", thisTable);
var objExcel = new ActiveXObject ("Excel.Application");
objExcel.visible = true;
var objWorkbook = objExcel.Workbooks.Add;
var objWorksheet = objWorkbook.Worksheets(1);
objWorksheet.Paste;
}
</script>
Et maintenant, il existe un meilleur moyen.
Kit de développement OpenXML pour JavaScript.
une simple recherche sur Google a révélé ceci:
Si les données sont en réalité une page HTML et n'ont PAS été créées par ASP, PHP ou un autre langage de script, et que vous utilisez Internet Explorer 6, et que Excel est installé sur votre ordinateur, cliquez simplement sur la page et regardez. à travers le menu. Vous devriez voir "Exporter vers Microsoft Excel". Si toutes ces conditions sont remplies, cliquez sur l'élément de menu et, après quelques invites, il sera importé dans Excel.
si vous ne pouvez pas faire cela, il propose une autre méthode de "glisser-déposer":
function normalexport() {
try {
var i;
var j;
var mycell;
var tableID = "tblInnerHTML";
var drop = document.getElementById('<%= ddl_sections.ClientID %>');
var objXL = new ActiveXObject("Excel.Application");
var objWB = objXL.Workbooks.Add();
var objWS = objWB.ActiveSheet;
var str = filterNum(drop.options[drop.selectedIndex].text);
objWB.worksheets("Sheet1").activate; //activate dirst worksheet
var XlSheet = objWB.activeSheet; //activate sheet
XlSheet.Name = str; //rename
for (i = 0; i < document.getElementById("ctl00_ContentPlaceHolder1_1").rows.length - 1; i++) {
for (j = 0; j < document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells.length; j++) {
mycell = document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells(j);
objWS.Cells(i + 1, j + 1).Value = mycell.innerText;
// objWS.Cells(i + 1, j + 1).style.backgroundColor = mycell.style.backgroundColor;
}
}
objWS.Range("A1", "L1").Font.Bold = true;
// objWS.Range("A1", "L1").Font.ColorIndex = 2;
// objWS.Range("A1", "Z1").Interior.ColorIndex = 47;
objWS.Range("A1", "Z1").EntireColumn.AutoFit();
//objWS.Range("C1", "C1").ColumnWidth = 50;
objXL.Visible = true;
} catch (err) {
alert("Error. Scripting for ActiveX might be disabled")
return
}
idTmr = window.setInterval("Cleanup();", 1);
}
function filterNum(str) {
return str.replace(/[ / ]/g, '');
}
Il existe deux manières pratiques de le faire automatiquement alors qu'une seule solution peut être utilisée dans tous les navigateurs. Tout d’abord, vous devez utiliser la spécification open xml pour créer la feuille Excel. Il existe des plug-ins gratuits de Microsoft qui rendent ce format également disponible pour les anciennes versions de bureau. Open XML est la norme depuis office 2007. Les deux façons de procéder sont évidentes côté serveur ou côté client.
L'implémentation côté client utilise une nouvelle norme CSS qui vous permet de stocker des données au lieu de simplement l'URL des données. C’est une excellente approche car vous n’avez besoin d’aucun serveur, seulement des données et du javascript. L'inconvénient majeur est que Microsoft ne prend pas en charge toutes les parties des versions actuelles de IE (je ne connais pas IE9). Microsoft limite les données à une image, mais nous avons besoin d’un document. Dans Firefox, cela fonctionne très bien. Pour moi, le IE était le point de chute.
L'autre façon consiste à utiliser une implémentation côté serveur. Il devrait y avoir beaucoup d'implémentations de XML ouvert pour toutes les langues. Vous avez juste besoin d'en saisir un. Dans la plupart des cas, ce sera le moyen le plus simple de modifier un Viewmodel pour obtenir un document, mais vous pouvez bien sûr renvoyer toutes les données de Clientside au serveur et en faire de même.