Copier / Coller d'Excel vers une page Web

Question 1

Existe-t-il une méthode standard ou une bibliothèque pour copier et coller d'une feuille de calcul vers un formulaire Web? Lorsque je sélectionne plus d'une cellule d'Excel, je perds (évidemment) le délimiteur et tout est collé dans une cellule du formulaire Web. Doit-il être fait en VB? ou le traitement pourrait-il être effectué une fois que l'action de collage est lancée sur le formulaire Web?

Question 2

Vous ne perdez pas les délimiteurs, les cellules sont séparées par des tabulations ( \t) et les lignes par des retours à la ligne ( \n) qui peuvent ne pas être visibles dans le formulaire. Essayez-le vous-même: copiez le contenu d'Excel vers le Bloc-notes et vous verrez vos cellules bien alignées. Il est alors facile de diviser les champs par onglets et de les remplacer par autre chose, de cette façon vous pouvez même créer une table à partir d'eux. Voici un exemple utilisant jQuery:

var data = $('input[name=excel_data]').val();
var rows = data.split("\n");

var table = $('<table />');

for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#excel_table').html(table);

Donc, en substance, ce script crée un tableau HTML à partir de données Excel collées.

Question 3

En réponse à la réponse de Tatu, j'ai créé un jsFiddle rapide pour présenter sa solution:

http://jsfiddle.net/duwood/sTX7y/

HTML

<p>Paste excel data here:</p>  
<textarea name="excel_data" style="width:250px;height:150px;"></textarea><br>
<input type="button" onclick="javascript:generateTable()" value="Genereate Table"/>
<br><br>
    <p>Table data will appear below</p>
<hr>
<div id="excel_table"></div>

JS

function generateTable() {
    var data = $('textarea[name=excel_data]').val();
    console.log(data);
    var rows = data.split("\n");

    var table = $('<table />');

    for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#excel_table').html(table);
}

Question 4

Sous OSX et Windows , il existe plusieurs types de presse-papiers pour différents types de contenu. Lorsque vous copiez du contenu dans Excel, les données sont stockées dans le texte brut et dans le presse-papiers html.

La bonne façon (qui n'est pas déclenchée par des problèmes de délimiteur) est d'analyser le HTML. http://jsbin.com/uwuvan/5 est une démo simple qui montre comment obtenir le presse-papiers HTML. La clé est de se lier à l'événement onpaste et de lire

event.clipboardData.getData('text/html')

Question 5

La même idée que Tatu (merci j'en aurai bientôt besoin dans notre projet), mais avec une expression régulière.
Ce qui peut être plus rapide pour un grand ensemble de données.

<html>
<head>
    <title>excelToTable</title>
    <script src="../libs/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <textarea>a1    a2  a3
b1  b2  b3</textarea>
    <div></div>
    <input type="button" onclick="convert()" value="convert"/>
    <script>
        function convert(){
            var xl = $('textarea').val();
            $('div').html( 
                '<table><tr><td>' + 
                xl.replace(/\n+$/i, '').replace(/\n/g, '</tr><tr><td>').replace(/\t/g, '</td><td>') + 
                '</tr></table>'
            )
        }
    </script>
</body>
</html>

Question 6

Pour tous les futurs googleurs qui se retrouveront ici comme moi, j'ai utilisé le concept de @tatu Ulmanen et je l'ai simplement transformé en un tableau d'objets. Cette fonction simple prend une chaîne de données Excel collées (ou feuille Google) (de préférence à partir de a textarea) et la transforme en un tableau d'objets. Il utilise la première ligne pour les noms de colonne / propriété.

function excelToObjects(stringData){
    var objects = [];
    //split into rows
    var rows = stringData.split('\n');

    //Make columns
    columns = rows[0].split('\t');

    //Note how we start at rowNr = 1, because 0 is the column row
    for (var rowNr = 1; rowNr < rows.length; rowNr++) {
        var o = {};
        var data = rows[rowNr].split('\t');

        //Loop through all the data
        for (var cellNr = 0; cellNr < data.length; cellNr++) {
            o[columns[cellNr]] = data[cellNr];
        }

        objects.push(o);
    }

    return objects;
}

Espérons que cela aide quelqu'un à l'avenir.

Question 7

MISE À JOUR: Ceci n'est vrai que si vous utilisez ONLYOFFICE au lieu de MS Excel.

Il y a en fait un flux dans toutes les réponses fournies ici et aussi dans celle acceptée. Le flux est que chaque fois que vous avez une cellule vide dans Excel et copiez cela, dans le presse-papiers, vous avez 2 caractères de tabulation l'un à côté de l'autre, donc après la division, vous obtenez un élément supplémentaire dans le tableau, qui apparaît alors comme une cellule supplémentaire dans cette ligne et déplace toutes les autres cellules d'une unité. Donc, pour éviter cela, vous devez essentiellement remplacer tous les caractères à double tabulation (onglets côte à côte uniquement) dans une chaîne par un caractère de tabulation et le diviser ensuite.

Une version mise à jour de jsfiddle de @ userfuser est là pour résoudre ce problème en filtrant les données collées avec removeExtraTabs

http://jsfiddle.net/sTX7y/794/

function removeExtraTabs(string) {
  return string.replace(new RegExp("\t\t", 'g'), "\t");
}

function generateTable() {
  var data = removeExtraTabs($('#pastein').val());
  var rows = data.split("\n");
  var table = $('<table />');

  for (var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for (var x in cells) {
      row.append('<td>' + cells[x] + '</td>');
    }
    table.append(row);
  }

  // Insert into DOM
  $('#excel_table').html(table);
}

$(document).ready(function() {
  $('#pastein').on('paste', function(event) {
    $('#pastein').on('input', function() {
      generateTable();
      $('#pastein').off('input');
    })
  })
})

Question 8

Excel 2007 a une fonctionnalité pour faire cela sous l'onglet "Données" qui fonctionne assez bien.

Question 9

Creuser cela, au cas où quelqu'un le croiserait à l'avenir. J'ai utilisé le code ci-dessus comme prévu, mais j'ai ensuite rencontré un problème d'affichage de la table après qu'elle ait été soumise à une base de données. Il est beaucoup plus facile une fois que vous avez stocké les données d'utiliser PHP pour remplacer les nouvelles lignes et onglets dans votre requête. Vous pouvez effectuer le remplacement lors de la soumission, $ _POST [demande] serait le nom de votre zone de texte:

$postrequest = trim($_POST[request]);
$dirty = array("\n", "\t");
$clean = array('</tr><tr><td>', '</td><td>');
$request = str_replace($dirty, $clean, $postrequest);

Maintenant, insérez simplement $ request dans votre base de données, et il sera stocké sous forme de tableau HTML.

Question 10

Il serait peut-être préférable de lire votre fichier Excel à partir de PHP, puis de l'enregistrer dans une base de données ou d'effectuer un traitement dessus.

ici un tutoriel détaillé sur la lecture et l'écriture de données Excel avec PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Answer 1

88

Existe-t-il une méthode standard ou une bibliothèque pour copier et coller d'une feuille de calcul vers un formulaire Web? Lorsque je sélectionne plus d'une cellule d'Excel, je perds (évidemment) le délimiteur et tout est collé dans une cellule du formulaire Web. Doit-il être fait en VB? ou le traitement pourrait-il être effectué une fois que l'action de collage est lancée sur le formulaire Web?

javascript html forms excel Sa dudenesse
la source

Essayez-vous d'automatiser quelque chose? Pouvez-vous donner un meilleur exemple ...

Dayton Brown

2

J'avais peur de poser cette question. Merci de l'avoir fait et d'être si concis. :)

Nostalg.io

Answer 2

Essayez-vous d'automatiser quelque chose? Pouvez-vous donner un meilleur exemple ...

Dayton Brown

Answer 3

2

J'avais peur de poser cette question. Merci de l'avoir fait et d'être si concis. :)

Nostalg.io

Answer 4

93

Vous ne perdez pas les délimiteurs, les cellules sont séparées par des tabulations ( \t) et les lignes par des retours à la ligne ( \n) qui peuvent ne pas être visibles dans le formulaire. Essayez-le vous-même: copiez le contenu d'Excel vers le Bloc-notes et vous verrez vos cellules bien alignées. Il est alors facile de diviser les champs par onglets et de les remplacer par autre chose, de cette façon vous pouvez même créer une table à partir d'eux. Voici un exemple utilisant jQuery:

var data = $('input[name=excel_data]').val();
var rows = data.split("\n");

var table = $('<table />');

for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#excel_table').html(table);

Donc, en substance, ce script crée un tableau HTML à partir de données Excel collées.

Tatu Ulmanen
la source

9

J'ai joué avec un problème similaire, cela vaut la peine de le noter, en collant dans une zone de texte, vous perdez les nouvelles lignes. Lorsque vous les collez dans une zone de texte, vous les conservez.

wobbily_col

Pour des raisons pratiques, vous pouvez faire de cette réponse un extrait de code pour de futures utilisations.

AdrianoRR

1

S'il y a une nouvelle ligne dans une cellule, cela se brise.

th3byrdm4n

Juste une petite note à ce sujet - fonctionne à merveille, mais Excel ajoute une ligne de fin lorsque les données sont copiées afin que vous vous retrouviez avec un vide td. Just FYI

jg2703

c'est une solution rapide mais à court terme, que se passe-t-il si l'une de mes cellules contient \ n

MeVimalkumar

Answer 5

9

J'ai joué avec un problème similaire, cela vaut la peine de le noter, en collant dans une zone de texte, vous perdez les nouvelles lignes. Lorsque vous les collez dans une zone de texte, vous les conservez.

wobbily_col

Answer 6

Pour des raisons pratiques, vous pouvez faire de cette réponse un extrait de code pour de futures utilisations.

AdrianoRR

Answer 7

1

S'il y a une nouvelle ligne dans une cellule, cela se brise.

th3byrdm4n

Answer 8

Juste une petite note à ce sujet - fonctionne à merveille, mais Excel ajoute une ligne de fin lorsque les données sont copiées afin que vous vous retrouviez avec un vide td. Just FYI

jg2703

Answer 9

c'est une solution rapide mais à court terme, que se passe-t-il si l'une de mes cellules contient \ n

MeVimalkumar

Answer 10

En réponse à la réponse de Tatu, j'ai créé un jsFiddle rapide pour présenter sa solution:

http://jsfiddle.net/duwood/sTX7y/

HTML

<p>Paste excel data here:</p>  
<textarea name="excel_data" style="width:250px;height:150px;"></textarea><br>
<input type="button" onclick="javascript:generateTable()" value="Genereate Table"/>
<br><br>
    <p>Table data will appear below</p>
<hr>
<div id="excel_table"></div>

JS

function generateTable() {
    var data = $('textarea[name=excel_data]').val();
    console.log(data);
    var rows = data.split("\n");

    var table = $('<table />');

    for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#excel_table').html(table);
}

Answer 11

3

Et voici mon ajout à cette réponse, mais avec le tableau automatique qui s'affiche, tout de suite sur l'événement de collage : jsfiddle.net/sTX7y/690 Fondamentalement, il simule l'événement «afterpaste».

userfuser

Answer 12

12

Sous OSX et Windows , il existe plusieurs types de presse-papiers pour différents types de contenu. Lorsque vous copiez du contenu dans Excel, les données sont stockées dans le texte brut et dans le presse-papiers html.

La bonne façon (qui n'est pas déclenchée par des problèmes de délimiteur) est d'analyser le HTML. http://jsbin.com/uwuvan/5 est une démo simple qui montre comment obtenir le presse-papiers HTML. La clé est de se lier à l'événement onpaste et de lire

event.clipboardData.getData('text/html')

FeuilleJS
la source

Le jsbin n'a pas fonctionné comme prévu pour moi (Firefox 42 sur Win 7, Excel 2013). Quelque chose d'important a-t-il changé depuis que vous avez publié cette réponse, ce qui fait que cette approche ne fonctionne plus? Dans la console du navigateur, je vois le texte / contenu brut enregistré, mais le contenu texte / html est vide.

Christian Semrau

Cela fonctionne avec Chrome soit sur Windows avec Excel ou sur Ubuntu avec LibreOffice. Meilleure solution IMO, car elle conserve tout le formatage des feuilles d'origine.

BiAiB

cette réponse assez pertinente mais nécessite plus de détails

MeVimalkumar

Answer 13

Le jsbin n'a pas fonctionné comme prévu pour moi (Firefox 42 sur Win 7, Excel 2013). Quelque chose d'important a-t-il changé depuis que vous avez publié cette réponse, ce qui fait que cette approche ne fonctionne plus? Dans la console du navigateur, je vois le texte / contenu brut enregistré, mais le contenu texte / html est vide.

Christian Semrau

Answer 14

Cela fonctionne avec Chrome soit sur Windows avec Excel ou sur Ubuntu avec LibreOffice. Meilleure solution IMO, car elle conserve tout le formatage des feuilles d'origine.

BiAiB

Answer 15

cette réponse assez pertinente mais nécessite plus de détails

MeVimalkumar

Answer 16

8

La même idée que Tatu (merci j'en aurai bientôt besoin dans notre projet), mais avec une expression régulière.
Ce qui peut être plus rapide pour un grand ensemble de données.

<html>
<head>
    <title>excelToTable</title>
    <script src="../libs/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <textarea>a1    a2  a3
b1  b2  b3</textarea>
    <div></div>
    <input type="button" onclick="convert()" value="convert"/>
    <script>
        function convert(){
            var xl = $('textarea').val();
            $('div').html( 
                '<table><tr><td>' + 
                xl.replace(/\n+$/i, '').replace(/\n/g, '</tr><tr><td>').replace(/\t/g, '</td><td>') + 
                '</tr></table>'
            )
        }
    </script>
</body>
</html>

Micro
la source

Salut Mic, c'est un excellent code! Avez-vous une idée de la façon dont je pourrais transformer cette conversion de table en un formulaire à soumettre?

BvilleBullet

cela dépend du formulaire que vous souhaitez soumettre. Je ferais un json stringifié à partir de cela, et le posterais comme un seul champ sur le serveur.

Mic

Au fait, cela fonctionne aussi pour un tableau Word (l'un des "formulaires" hérités de mes utilisateurs que nous essayons de convertir). Merci.

Hugh Seagraves

Answer 17

Salut Mic, c'est un excellent code! Avez-vous une idée de la façon dont je pourrais transformer cette conversion de table en un formulaire à soumettre?

BvilleBullet

Answer 18

cela dépend du formulaire que vous souhaitez soumettre. Je ferais un json stringifié à partir de cela, et le posterais comme un seul champ sur le serveur.

Mic

Answer 19

Au fait, cela fonctionne aussi pour un tableau Word (l'un des "formulaires" hérités de mes utilisateurs que nous essayons de convertir). Merci.

Hugh Seagraves

Answer 20

Pour tous les futurs googleurs qui se retrouveront ici comme moi, j'ai utilisé le concept de @tatu Ulmanen et je l'ai simplement transformé en un tableau d'objets. Cette fonction simple prend une chaîne de données Excel collées (ou feuille Google) (de préférence à partir de a textarea) et la transforme en un tableau d'objets. Il utilise la première ligne pour les noms de colonne / propriété.

function excelToObjects(stringData){
    var objects = [];
    //split into rows
    var rows = stringData.split('\n');

    //Make columns
    columns = rows[0].split('\t');

    //Note how we start at rowNr = 1, because 0 is the column row
    for (var rowNr = 1; rowNr < rows.length; rowNr++) {
        var o = {};
        var data = rows[rowNr].split('\t');

        //Loop through all the data
        for (var cellNr = 0; cellNr < data.length; cellNr++) {
            o[columns[cellNr]] = data[cellNr];
        }

        objects.push(o);
    }

    return objects;
}

Espérons que cela aide quelqu'un à l'avenir.

Answer 21

MISE À JOUR: Ceci n'est vrai que si vous utilisez ONLYOFFICE au lieu de MS Excel.

Il y a en fait un flux dans toutes les réponses fournies ici et aussi dans celle acceptée. Le flux est que chaque fois que vous avez une cellule vide dans Excel et copiez cela, dans le presse-papiers, vous avez 2 caractères de tabulation l'un à côté de l'autre, donc après la division, vous obtenez un élément supplémentaire dans le tableau, qui apparaît alors comme une cellule supplémentaire dans cette ligne et déplace toutes les autres cellules d'une unité. Donc, pour éviter cela, vous devez essentiellement remplacer tous les caractères à double tabulation (onglets côte à côte uniquement) dans une chaîne par un caractère de tabulation et le diviser ensuite.

Une version mise à jour de jsfiddle de @ userfuser est là pour résoudre ce problème en filtrant les données collées avec removeExtraTabs

http://jsfiddle.net/sTX7y/794/

function removeExtraTabs(string) {
  return string.replace(new RegExp("\t\t", 'g'), "\t");
}

function generateTable() {
  var data = removeExtraTabs($('#pastein').val());
  var rows = data.split("\n");
  var table = $('<table />');

  for (var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for (var x in cells) {
      row.append('<td>' + cells[x] + '</td>');
    }
    table.append(row);
  }

  // Insert into DOM
  $('#excel_table').html(table);
}

$(document).ready(function() {
  $('#pastein').on('paste', function(event) {
    $('#pastein').on('input', function() {
      generateTable();
      $('#pastein').off('input');
    })
  })
})

Answer 22

En fait, j'ai découvert que cela n'arrive que si vous copiez à partir de la feuille de calcul du logiciel ONLYOFFICE. Hmm ... Laisser ça ici au cas où quelqu'un trébucherait dessus.

Aram

Answer 23

0

Excel 2007 a une fonctionnalité pour faire cela sous l'onglet "Données" qui fonctionne assez bien.

LeWoody
la source

Answer 24

Creuser cela, au cas où quelqu'un le croiserait à l'avenir. J'ai utilisé le code ci-dessus comme prévu, mais j'ai ensuite rencontré un problème d'affichage de la table après qu'elle ait été soumise à une base de données. Il est beaucoup plus facile une fois que vous avez stocké les données d'utiliser PHP pour remplacer les nouvelles lignes et onglets dans votre requête. Vous pouvez effectuer le remplacement lors de la soumission, $ _POST [demande] serait le nom de votre zone de texte:

$postrequest = trim($_POST[request]);
$dirty = array("\n", "\t");
$clean = array('</tr><tr><td>', '</td><td>');
$request = str_replace($dirty, $clean, $postrequest);

Maintenant, insérez simplement $ request dans votre base de données, et il sera stocké sous forme de tableau HTML.

Answer 25

-1

Il serait peut-être préférable de lire votre fichier Excel à partir de PHP, puis de l'enregistrer dans une base de données ou d'effectuer un traitement dessus.

ici un tutoriel détaillé sur la lecture et l'écriture de données Excel avec PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Adnan
la source

C'est une solution absolument terrible. Je suis venu à ce fil car je le fais actuellement et il est incroyablement sujet aux erreurs. Excel crache parfois des nombres sous forme d'entiers, parfois sous forme de flottants parfois sous forme de chaînes.

wobbily_col

également des scénarios utilisateur s'appliquent, où vous devez coller à partir de sources non fiables, comme votre banque, dont les fichiers xls / csv sont pleins de merde qui doivent être tamisés manuellement

ZJR

Answer 26

C'est une solution absolument terrible. Je suis venu à ce fil car je le fais actuellement et il est incroyablement sujet aux erreurs. Excel crache parfois des nombres sous forme d'entiers, parfois sous forme de flottants parfois sous forme de chaînes.

wobbily_col

Answer 27

également des scénarios utilisateur s'appliquent, où vous devez coller à partir de sources non fiables, comme votre banque, dont les fichiers xls / csv sont pleins de merde qui doivent être tamisés manuellement

ZJR

Copier / Coller d'Excel vers une page Web

Réponses: