Coller les données Excel en tableau html

À l'aide de Javascript, comment puis-je créer un tableau HTML qui peut "accepter" numérique de la matrice de données à partir d'excel (ou feuille de calcul google), par l'intermédiaire de "copier" dans la feuille de calcul, puis "coller" dans la table dans le navigateur.

InformationsquelleAutor perrinmeyer | 2009-07-07
  1. 18

    Cela ne pourrait fonctionner de manière fiable sur IE depuis Firefox (et probablement d'autres) ne permet pas l'accès au presse-papiers sans les y autorise; la suggestion antérieure de la coller dans un textarea première pourrait fonctionner mieux que cela.

    Lorsque vous copiez à partir d'une feuille de calcul, de façon générale, les cellules sont séparées par une tabulation (chr9) et les lignes avec un CR (chr13). Ce script convertit le presse-papiers dans un tableau 2D, puis construit une table à partir d'elle. Pas trop élégant, mais il semble fonctionner 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>
    • Merci!!! Je vais essayer cela ce soir.
    • J'ai eu à utiliser txt.split("\n"); au lieu de txt.split(String.fromCharCode(13));
    • J'ai eu à utiliser split("\n") pour firefox et split(String.fromCharCode(13)) pour Chrome
    • Si quelqu'un a testé le fractionnement du 13 & 10? (CR & LF)
    • Ne serait-ce pas se briser si l'une des cellules a une \r\n - t-il?
    • Oui, lorsque la cellule contient des \n, cette \n logique échoue, mais fromCharCode(13) ne fonctionne pas sous macOS, probable/solutions de rechange

    InformationsquelleAutor Paul Abbott
  2. 5

    Voici le code javascript que j'ai créé (basé sur les réponses utiles). Je suis nouveau sur le javascript, donc je suis sûr qu'il ya beaucoup de meilleure façon de le faire, mais il semble fonctionner... Le but est de "coller" les deux colonnes de données numériques dans la zone de texte à partir d'une feuille de calcul (j'ai essayé les deux, excel et google feuille de calcul) et de créer la variable point de vecteurs "xf" et "fj". Je l'espère utile à quelqu'un. Critique de bienvenue...

    Il assume ces exister 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]);
}
    

    }

    InformationsquelleAutor perrinmeyer
  3. 1

    Cela va être très difficile à faire vraiment bien.

    Sur le dessus de ma tête, je dirais que la meilleure approche serait de donner aux utilisateurs un <textarea> qu'ils peuvent coller dans. Ensuite, dans le gestionnaire d'événements onchange, l'utilisation de certains JS analyse de figure où les lignes et les colonnes, de créer le code HTML de la table et de l'injecter dans le DOM.

    Cela devrait fonctionner bien pour un relativement "carré" dataset - vous peut-être des problèmes plus avec fusionné les colonnes/lignes et les "irréguliers" données

    InformationsquelleAutor nikmd23
  4. 0

    Bien que cette question est considérée comme déjà répondu (et c'est un oldy), je tiens à souligner qu'il existe de meilleures solutions à nos jours, voir jQuery feuille de calcul/de la Grille de plugin avec le copier/coller depuis/vers Excel . J'aime particulièrement le minimalisme de le HandsOnTable que a été suggéré par warpech (qui est aussi le créateur de ce plugin jQuery). Le plugin est toujours très bien entretenu.

    • Sonne comme une publicité
    • À l'époque, j'ai fait ce commentaire, ce n'était pas vraiment promu comme un produit commercial. Ils n'offrent toujours une communauté open source edition bien.
    InformationsquelleAutor murb