web-dev-qa-db-fra.com

Coller des données Excel dans un tableau html

Avec JavaScript, comment créer un tableau HTML pouvant "accepter" les données matricielles numériques d'Excel (ou d'un tableur Google), via "copier" dans le tableur, puis "coller" dans le tableau du navigateur. 

javascripthtml-tablespreadsheet
24
perrinmeyer

Cela ne fonctionnerait de manière fiable que sur IE car Firefox (et probablement d’autres) ne permet pas l’accès au presse-papier sans l’autoriser spécifiquement; la suggestion antérieure de coller dans une première zone de texte pourrait mieux fonctionner que cela.

Lorsque vous copiez depuis une feuille de calcul, les cellules sont généralement séparées par une tabulation (chr9) et les lignes par un CR (chr13). Ce script convertit le Presse-papiers en tableau 2D, puis en crée un tableau. Pas trop élégant, mais cela semble fonctionner pour copier des données à partir d’Excel.

<html>
<head>
<script language="javascript">
function clip() {

    // get the clipboard text

    var clipText = window.clipboardData.getData('Text');

    // split into rows

    clipRows = clipText.split(String.fromCharCode(13));

    // split rows into columns

    for (i=0; i<clipRows.length; i++) {
        clipRows[i] = clipRows[i].split(String.fromCharCode(9));
    }


    // write out in a table

    newTable = document.createElement("table")
    newTable.border = 1;
    for (i=0; i<clipRows.length - 1; i++) {

        newRow = newTable.insertRow();

        for (j=0; j<clipRows[i].length; j++) {
            newCell = newRow.insertCell();
            if (clipRows[i][j].length == 0) {
                newCell.innerText = ' ';
            }
            else {
                newCell.innerText = clipRows[i][j];
            }
        }
    }

    document.body.appendChild(newTable);
}
</script>
</head>
<body>
<input type="button" onclick="clip()">
</body>
</html>
17
Paul Abbott

Voici le code javascript que j'ai créé (basé sur les réponses utiles). Javascript est nouveau pour moi, je suis donc sûr qu'il existe une bien meilleure façon de le faire, mais cela semble fonctionner ... L'objectif est de "coller" deux colonnes de données numériques dans la zone de texte à partir d'un tableur (I 'ai essayé à la fois Excel et Google tableur) et créer des vecteurs en virgule flottante "xf" et "yf". Si tout va bien utile à quelqu'un. La critique est la bienvenue ...

Cela suppose qu’elles existent sur une page html ... 

<textarea id="psmtext" rows=24 cols=72> </textarea>

<input type="button" value="run code" onClick="psmtest();">



function psmtest(){
var psmtext = document.getElementById("psmtext");
  var st = psmtext.value;
  Ast = st.split("\n");
  var numrows = Ast.length; 
var ii;
  var xs = [];
  var ys = [];
  for (ii = 0 ; ii < numrows ; ii++) {
      // tab or comma deliminated data
      if ( Ast[ii].split(",",2)[1] != null ){ ys[ii] = Ast[ii].split(",")[1]; xs[ii] = Ast[ii].split(",")[0];}
      if ( Ast[ii].split("\t",2)[1] != null ){ ys[ii] = Ast[ii].split("\t")[1]; xs[ii] = Ast[ii].split("\t")[0];}
  }
var xss = [];
  var yss = [];
  var numgoodrows = 0;
  var iii =0;
  for (ii = 0 ; ii < numrows ; ii++) { 
      if ( xs[ii] != null && ys[ii] != null) {
          xss[iii] = xs[ii];
          yss[iii] = ys[ii];
          iii++;
      }
  }
  numgoodrows = iii;
  // next I need to convert to floating point array var xf = [], var yf = [];
var xf = [];
  var yf = [];
  for (ii = 0 ; ii < numgoodrows ; ii++) { 
    xf[ii] = parseFloat(xss[ii]);
    yf[ii] = parseFloat(yss[ii]);
  }
}

5
perrinmeyer

Cela va être très difficile de faire très bien.

De mémoire, je dirais que la meilleure approche serait de donner aux utilisateurs un <textarea> dans lequel ils peuvent coller. Ensuite, dans le gestionnaire d’événements onchange, utilisez une analyse JS pour déterminer l’alignement des lignes et des colonnes, créez le tableau HTML et insérez-le dans le DOM.

Cela devrait fonctionner correctement pour un jeu de données relativement "carré" - vous pourriez rencontrer plus de problèmes avec les colonnes/lignes fusionnées et les données "irrégulières".

1
nikmd23

Bien que cette question soit déjà considérée comme une réponse (et qu’elle soit ancienne), je voudrais souligner qu’il existe de meilleures solutions de nos jours, voir plugin jQuery Spreadsheet/Grid avec copier/coller de/vers Excel . J'aime particulièrement le minimalisme de la HandsOnTable que a été suggérée par warpech (également le créateur de ce plugin jQuery). Le plugin est toujours très bien maintenu.

0
murb