Comment exporter un tableau HTML avec Excel à l'aide de javascript
Ma table est en format
<table id="mytable">
<thead>
<tr>
<th>name</th>
<th>place</th>
</tr>
</thead>
<tbody>
<tr>
<td>adfas</td>
<td>asdfasf</td>
</tr>
</tbody>
</table>
J'ai trouvé le code suivant en ligne. Mais cela ne fonctionne pas si j'utilise les balises "thead" et "tbody"
function write_to_Excel() {
str = "";
var mytable = document.getElementsByTagName("table")[0];
var rowCount = mytable.rows.length;
var colCount = mytable.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for (var i = 0; i < rowCount; i++) {
for (var j = 0; j < colCount; j++) {
str = mytable.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
}
}
La raison pour laquelle la solution que vous avez trouvée sur Internet ne fonctionne pas, c'est à cause de la ligne qui commence var colCount. La variable mytable n'a que deux éléments: <thead> et <tbody>. La ligne var colCount recherche tous les éléments dans mytable qui sont <tr>. La meilleure chose à faire est de donner un identifiant à vos <thead> et <tbody>, puis de récupérer toutes les valeurs qui en résultent. Disons que vous aviez <thead id='headers'>:
function write_headers_to_Excel()
{
str="";
var myTableHead = document.getElementById('headers');
var rowCount = myTableHead.rows.length;
var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for(var i=0; i<rowCount; i++)
{
for(var j=0; j<colCount; j++)
{
str= myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i+1,j+1).Value = str;
}
}
}
puis faites la même chose pour la balise <tbody>.
EDIT: Je recommande aussi fortement d’utiliser jQuery. Cela réduirait cela à:
function write_to_Excel()
{
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
$('th, td').each(function(i){
ExcelSheet.ActiveSheet.Cells(i+1,i+1).Value = this.innerHTML;
});
}
Maintenant, bien sûr, cela va vous poser quelques problèmes de formatage mais vous pouvez déterminer comment vous souhaitez le formater dans Excel.
EDIT: Pour répondre à votre question sur la façon de procéder pour le nombre de tables n, jQuery le fera déjà. Pour le faire en Javascript brut, récupérez toutes les tables puis modifiez la fonction pour pouvoir la passer en paramètre. Par exemple:
var tables = document.getElementsByTagName('table');
for(var i = 0; i < tables.length; i++)
{
write_headers_to_Excel(tables[i]);
write_bodies_to_Excel(tables[i]);
}
Puis changez la function write_headers_to_Excel() en function write_headers_to_Excel(table). Puis changez var myTableHead = document.getElementById('headers'); en var myTableHead = table.getElementsByTagName('thead')[0];. Idem avec votre write_bodies_to_Excel() ou comme vous voulez le configurer.
Ne fonctionne que dans Mozilla, Chrome et Safari.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"> </script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var url='data:application/vnd.ms-Excel,' + encodeURIComponent($('#tableWrap').html())
location.href=url
return false
})
})
</script>
<style type="text/css">
</style>
<title>Untitled</title>
</head>
<body>
<button>click me</button>
<div id="tableWrap">
<table>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Excel Export Script works on IE7+ , Firefox and Chrome
===========================================================
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-Excel,' + encodeURIComponent(tab_text));
return (sa);
}
Just Create a blank iframe
enter code here
<iframe id="txtArea1" style="display:none"></iframe>
Call this function on
<button id="btnExport" onclick="fnExcelReport();"> EXPORT
</button>
Cela pourrait être une meilleure réponse copiée à partir de cette question . S'il vous plaît essayez-le et donnez votre avis ici. S'il vous plaît voter si jugé utile. Je vous remercie.
<script type="text/javascript">
function generate_Excel(tableid) {
var table= document.getElementById(tableid);
var html = table.outerHTML;
window.open('data:application/vnd.ms-Excel;base64,' + base64_encode(html));
}
function base64_encode (data) {
// http://kevin.vanzonneveld.net
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Bayron Guevara
// + improved by: Thunder.m
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Rafal Kukawski (http://kukawski.pl)
// * example 1: base64_encode('Kevin van Zonneveld');
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window['btoa'] == 'function') {
// return btoa(data);
//}
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = "",
tmp_arr = [];
if (!data) {
return data;
}
do { // pack three octets into four hexets
o1 = data.charCodeAt(i++);
o2 = data.charCodeAt(i++);
o3 = data.charCodeAt(i++);
bits = o1 << 16 | o2 << 8 | o3;
h1 = bits >> 18 & 0x3f;
h2 = bits >> 12 & 0x3f;
h3 = bits >> 6 & 0x3f;
h4 = bits & 0x3f;
// use hexets to index into b64, and append result to encoded string
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
} while (i < data.length);
enc = tmp_arr.join('');
var r = data.length % 3;
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}
</script>
function XLExport() {
try {
var i;
var j;
var mycell;
var tableID = "tblInnerHTML";
var objXL = new ActiveXObject("Excel.Application");
var objWB = objXL.Workbooks.Add();
var objWS = objWB.ActiveSheet;
for (i = 0; i < document.getElementById('<%= tblAuditReport.ClientID %>').rows.length; i++) {
for (j = 0; j < document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells.length; j++) {
mycell = document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells(j);
objWS.Cells(i + 1, j + 1).Value = mycell.innerText;
}
}
//objWS.Range("A1", "L1").Font.Bold = true;
objWS.Range("A1", "Z1").EntireColumn.AutoFit();
//objWS.Range("C1", "C1").ColumnWidth = 50;
objXL.Visible = true;
}
catch (err) {
}
}
Regarde ça ... Je viens de faire fonctionner ça et il semble exactement ce que tu essayes de faire aussi.
2 fonctions. Un pour sélectionner le tableau et le copier dans le presse-papiers, et le second l'écrit en masse dans Excel. Appelez simplement write_to_Excel () et entrez votre identifiant de table (ou modifiez-le pour le prendre comme argument).
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
range.execCommand("Copy");
}
function write_to_Excel()
{
var tableID = "AllItems";
selectElementContents( document.getElementById(tableID) );
var Excel = new ActiveXObject("Excel.Application");
// Excel.Application.Visible = true;
var wb=Excel.WorkBooks.Add();
var ws=wb.Sheets("Sheet1");
ws.Cells(1,1).Select;
ws.Paste;
ws.DrawingObjects.Delete;
ws.Range("A1").Select
Excel.Application.Visible = true;
}
Fortement influencé par: Sélectionnez un tableau complet avec Javascript (à copier dans le presse-papier)
Je suggérerais d'utiliser une approche différente. Ajoutez un bouton sur la page Web qui copiera le contenu du tableau dans le Presse-papiers, avec des caractères de tabulation entre les colonnes et des lignes nouvelles entre les lignes. Ainsi, la fonction "coller" dans Excel devrait fonctionner correctement et votre application Web fonctionnerait également avec de nombreux navigateurs et systèmes d'exploitation (Linux, Mac, Mobile) et les utilisateurs pourraient utiliser les données également avec d'autres feuilles de calcul ou traitement de texte programmes.
La seule difficulté est de copier dans le presse-papiers car de nombreux navigateurs sont obsédés par la sécurité. Une solution consiste à préparer les données déjà sélectionnées dans une zone de texte et à les montrer à l'utilisateur dans une boîte de dialogue modale dans laquelle vous lui demandez de copier le texte utilisez une "touche longue" ou un menu contextuel).
Il serait plus agréable d'avoir une fonction standard de copie dans le presse-papier qui demande éventuellement une confirmation de l'utilisateur ... mais ce n'est pas le cas, malheureusement.
J'essaye cela avec jQuery; utilisez-le et amusez-vous: D
jQuery.printInExcel = function (DivID)
{
var ExcelApp = new ActiveXObject("Excel.Application");
ExcelApp.Workbooks.Add;
ExcelApp.visible = true;
var str = "";
var tblcount = 0;
var trcount = 0;
$("#" + DivID + " table").each(function ()
{ $(this).find("tr").each(function ()
{ var tdcount = 0; $(this).find("td").each(function ()
{ str = str + $(this).text(); ExcelApp.Cells(trcount + 1, tdcount + 1).Value = str;
str = ""; tdcount++
});
trcount++
}); tblcount++
});
};
utilisez ceci dans votre classe et appelez-le avec $ .printInExcel ( votre var );
Je pense que vous pouvez également penser à des architectures alternatives. Parfois, quelque chose peut être fait d'une autre manière beaucoup plus facile. Si vous êtes le producteur du fichier HTML, vous pouvez alors écrire un gestionnaire HTTP pour créer un document Excel sur le serveur (ce qui est beaucoup plus facile que dans JavaScript) et envoyer un fichier au client. Si vous recevez ce fichier HTML de quelque part (comme une version HTML d'un rapport), vous pouvez toujours utiliser un langage côté serveur tel que C # ou PHP pour créer le fichier Excel très facilement. Je veux dire, vous pouvez aussi avoir d'autres moyens. :)