web-dev-qa-db-fra.com

Copier/Coller d'Excel vers une page Web

Existe-t-il une méthode standard ou une bibliothèque pour copier et coller d'une feuille de calcul dans un formulaire Web? Est-ce que cela doit être fait en VB? ou le traitement peut-il être effectué une fois que l'action de collage est lancée sur le formulaire Web?

javascripthtmlformsexcel
73
His dudeness

Vous ne perdez pas les délimiteurs, les cellules sont séparées par des onglets (\t) et les lignes par des nouvelles lignes (\n) qui peuvent ne pas être visibles dans le formulaire. Essayez vous-même: copiez le contenu d'Excel dans le Bloc-notes et vos cellules seront bien alignées. Il est alors facile de scinder les champs par des onglets et de les remplacer par autre chose, de cette manière, vous pouvez même créer une table à partir d’eux. Voici un exemple d'utilisation de 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, ce script crée essentiellement un tableau HTML à partir de données Excel collées.

72
Tatu Ulmanen

En réponse à la réponse de Tatu, j’ai créé un rapide jsFiddle 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);
}
20
dunderwood

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 les grands ensembles 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>
8
Mic

Sur 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 en clair et dans le Presse-papiers html. 

Le bon moyen (qui ne soit pas déclenché par des problèmes de délimiteur) consiste à analyser le code HTML. http://jsbin.com/uwuvan/5 est une simple démo qui montre comment obtenir le presse-papier HTML. La clé est de se lier à l'événement onpaste et de lire 

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

Pour tous les futurs googleurs qui se retrouvent ici comme moi, j'ai utilisé le concept de @tatu Ulmanen et l'ai simplement transformé en un tableau d'objets. Cette fonction simple prend une chaîne de données Excel collées (ou une feuille Google) (de préférence à partir d'une textarea) et les 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;
}

J'espère que cela aidera quelqu'un dans le futur.

5
Coo

Excel 2007 dispose d’une fonctionnalité permettant de le faire sous l’onglet "Données" qui fonctionne très bien.

0
LeWoody

Déterrer cela au cas où quelqu'un le verrait plus tard. 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 l'avoir 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 les nouveaux onglets de 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);

Insérez maintenant $ request dans votre base de données, elle sera stockée sous forme de tableau HTML. 

0
dcclassics

UPDATE: Cela 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 que vous la copiez, dans le presse-papier, vous avez 2 caractères de tabulation côte à côte. Ainsi, après la scission, vous obtenez un élément supplémentaire dans un tableau, qui apparaît ensuite comme une cellule supplémentaire dans cette ligne. et déplace toutes les autres cellules d'une unité. Donc, pour éviter que vous deviez fondamentalement devoir remplacer tous les caractères de double tabulation (les uns à côté des autres) d'une chaîne par un seul caractère de tabulation et ensuite seulement le scinder.

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');
    })
  })
})
0
Aram

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 de le traiter.

voici 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

0
Adnan