Importer un classeur Excel vers une page web

Version imprimable

23/02/2018, 20h55
M-Amrouz

Importer un classeur Excel vers une page web

Bonjour chers tous,:P:P

j'éspère que vous allez bien ! :D

Sur ce forum, j'ai l'habitude de trouver des solutions sur plusieurs soucis que je rencontre :roll:, aujourd'hui je viens vers vous pour une aide :calim2:, mon soucis est le suivant :
comment peut-on importer un classeur Excel dans une page web ensuite afficher son contenu en forme de tableau sur notre page web?

Je vous remercie pour votre aide :mrgreen:,

Bien a vous,
M-Amrouz
24/02/2018, 16h23
headmax

Salut juste un exemple de conversion excel vers html. https://codepen.io/headmax/pen/QQVgOM
24/02/2018, 21h24
M-Amrouz

Merci pour votre réponse headmax, je suis déjâ tombé sur se site, mais ce n'est pas ce que je cherche a faire, les événement que je veux réaliser sur ma page web sont les suivants :

1) Cliquer sur un "Bouton" sur notre page web puis une fenêtre de dialogue s'affiche, puis naviguer vers le classeur Excel voulu qui se trouve sur notre disque( Jusque la je n'est pas de problème) ;):roll:
2) après avoir uploader le fichier Excel a l'aide de notre fenêtre de dialogue (c'est la que ça se complique pour moi :aie::aie:), j'aimerai que le contenu de chaque cellule de notre classeur Excel s'affiche sur notre page web dans un tableau qui seront enregistrer par la suite dans une base de données :D:D.

PS : pour le l'enregistrement dans la base de donnée je n'est pas de soucis :roll::D,

Bien a vous,
25/02/2018, 02h17
headmax
Bonsoir voici un projet qu'il suffit de cloner
Code:

1 2 git clone https://github.com/headmax/js-xlsx
Une démo en ligne : http://oss.sheetjs.com/
25/02/2018, 13h29
patricktoulon

re

@headmax
l'exemple de ton lien ne respecte pas le format couleur bold,italic etc.....

je sais faire l'inverse a savoir envoyer une plage d'un sheets vers un document a partir de vbaexcel mais pas l'inverse
je serais moi meme interessé par cela

Bonjour tous le monde,

après plusieurs recherche sur internet :pc: :scarymov: , j'ai trouver une solution et je vais la partager avec vous, :bravo: j’espère que d'autre personne en bénéficieront,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
 <head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <div class="table-responsive">
    <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
    <br />
    <div align="center">
     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
    </div>
    <br />
    <div id="employee_table">
    </div>
   </div>
  </div>
 </body>
</html>
 
<script>
$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"employee.csv",
   dataType:"text",
   success:function(data)
   {
    var employee_data = data.split(/\r?\n|\r/);
    var table_data = '<table class="table table-bordered table-striped">';
    for(var count = 0; count<employee_data.length; count++)
    {
     var cell_data = employee_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
       table_data += '<td>'+cell_data[cell_count]+'</td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#employee_table').html(table_data);
   }
  });
 });
 
});
</script>

et ces liens peut être qu'il vous seront utile aussi
http://sheetjs.com/docs.pdf

http://www.webslesson.info/2017/04/c...ax-jquery.html
Merci pour votre aide :google:
Bien a vous,