web-dev-qa-db-fra.com

Exportation d'un tableau HTML vers Excel à l'aide de Javascript

J'exporte la table HTML en xls foramt. Après avoir exporté si vous l'ouvrez dans Libre Office, cela fonctionne bien, mais la même chose ouvre un écran vide dans Microsoft Office. 

Je ne veux pas de solution jquery, veuillez fournir une solution javascript. S'il vous plaît, aidez-nous.

function fnExcelReport() {
    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange;
    var j = 0;
    tab = document.getElementById('table'); // 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);
}
<iframe id="txtArea1" style="display:none"></iframe>

    Call this function on

        <button id="btnExport" onclick="fnExcelReport();"> EXPORT 
        </button>

    <table id="table">
  <thead>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </tbody>
    </table>

javascripthtmlexcel
22
Shrinivas Pai

Le 2016-07-12, Microsoft a poussé une mise à jour de sécurité pour Microsoft Office. L'un des effets de cette mise à jour était d'empêcher l'ouverture d'Excel des fichiers HTML de domaines non approuvés, car ils ne peuvent pas être ouverts en mode protégé.

Il existe ÉGALEMENT un paramètre de registre qui empêche Excel d’ouvrir des fichiers avec l’extension de fichier .XLS dont le contenu ne correspond pas au format de fichier XLS officiel, bien que la valeur par défaut soit "avertir" et non "refuser".

Avant cette modification, il était possible de sauvegarder les données HTML dans un fichier avec une extension XLS. Excel l'ouvrait correctement - éventuellement en avertissant d'abord que le fichier ne correspondait pas au format Excel, en fonction de l'utilisateur. valeur de la clé de registre ExtensionHardening (ou des valeurs de configuration associées).

Microsoft a créé une base de connaissances entrée sur le nouveau comportement avec certaines solutions de contournement. 

Plusieurs applications Web qui utilisaient auparavant l'exportation de fichiers HTML au format XLS ont rencontré des problèmes en raison de la mise à jour - SalesForce en est un exemple.

Les réponses d'avant le 12 juillet 2016 à cette question et à des questions similaires risquent maintenant d'être invalides.

Il est à noter que les fichiers produits SUR LE NAVIGATEUR à partir de données distantes ne sont pas affectés par cette protection; cela n'empêche que les fichiers téléchargés à partir d'une source distante non approuvée. Par conséquent, une approche possible consiste à générer le fichier HTML étiqueté .XLS localement sur le client.

Un autre, bien sûr, consiste à produire un fichier XLS valide, qu'Excel ouvrira ensuite en mode protégé.

UPDATE: Microsoft a publié un correctif pour corriger ce problème: https://support.Microsoft.com/en-us/kb/3181507

24
S McCrohan

SheetJS semble parfait pour cela.

Pour exporter votre table en tant que fichier Excel, utilisez le code de ce link (avec SheetJS)

Il suffit de brancher l'id de votre élément table dans export_table_to_Excel

Voir Démo

11
jlynch630

Si le format CSV vous convient, voici un exemple.

  • Ok ... je viens de lire un commentaire où vous dites explicitement que ce n'est pas bon pour vous. Mon mal pour ne pas apprendre à lire avant le codage.

Autant que je sache, Excel peut gérer le format CSV.

function fnExcelReport() {
var i, j;
var csv = "";

var table = document.getElementById("table");

var table_headings = table.children[0].children[0].children;
var table_body_rows = table.children[1].children;

var heading;
var headingsArray = [];
for(i = 0; i < table_headings.length; i++) {
  heading = table_headings[i];
  headingsArray.Push('"' + heading.innerHTML + '"');
}

csv += headingsArray.join(',') + ";\n";

var row;
var columns;
var column;
var columnsArray;
for(i = 0; i < table_body_rows.length; i++) {
  row = table_body_rows[i];
  columns = row.children;
  columnsArray = [];
  for(j = 0; j < columns.length; j++) {
      var column = columns[j];
      columnsArray.Push('"' + column.innerHTML + '"');
  }
  csv += columnsArray.join(',') + ";\n";
}

  download("export.csv",csv);
}

//From: http://stackoverflow.com/a/18197511/2265487
function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}
<iframe id="txtArea1" style="display:none"></iframe>

Call this function on

<button id="btnExport" onclick="fnExcelReport();">EXPORT
</button>

<table id="table">
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
      <th>Head3</th>
      <th>Head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
    </tr>
  </tbody>
</table>

7
ElMesa

ajoutez ceci à votre tête:

<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>

et ajoutez ceci comme javascript:

<script type="text/javascript">
var tableToExcel = (function() {
  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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()
</script>

Jfiddle: http://jsfiddle.net/cmewv/537/

2
Connor Meeks

essaye ça

<table id="exportable">
<thead>
      <tr>
          //headers
      </tr>
</thead>
<tbody>
         //rows
</tbody>
</table>

Script pour cela

var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
saveAs(blob, "Report.xls");
2
Tarek Salah uddin Mahmud
<hrml>
  <head>
     <script language="javascript">
      function exportF() {
  //Format your table with form data
  document.getElementById("input").innerHTML = document.getElementById("text").value;
   document.getElementById("input1").innerHTML = document.getElementById("text1").value;
  var table = document.getElementById("table");
  var html = table.outerHTML;

  var url = 'data:application/vnd.C:\\Users\WB-02\desktop\Book1.xlsx,' + escape(html); // Set your html table into url 
  var link = document.getElementById("downloadLink");
  link.setAttribute("href", url);
  link.setAttribute("download", "export.xls"); // Choose the file name
  link.click(); // Download your Excel file   
  return false;
}
    </script>
 </head>
 <body>
<form onsubmit="return exportF()">
  <input id="text" type="text" />
  <input id="text1" type="text" />
  <input type="submit" />
</form>

<table id="table" style="display: none">
  <tr>
    <td id="input">
    <td id="input1">
    </td>
  </tr>
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
0
Anuruddh Mishra