Kopieren / Einfügen aus Excel auf eine Webseite

Question 1

Gibt es eine Standardmethode oder -bibliothek zum Kopieren und Einfügen aus einer Tabelle in ein Webformular? Wenn ich mehr als eine Zelle aus Excel auswähle, verliere ich (offensichtlich) das Trennzeichen und alles wird in eine Zelle des Webformulars eingefügt. Muss es in VB gemacht werden? oder könnte die Verarbeitung erfolgen, sobald die Einfügemaßnahme im Webformular gestartet wurde?

Question 2

Sie verlieren die Trennzeichen nicht, die Zellen werden durch Tabulatoren ( \t) und Zeilen durch Zeilenumbrüche ( \n) getrennt, die im Formular möglicherweise nicht sichtbar sind. Probieren Sie es selbst aus: Kopieren Sie Inhalte aus Excel in den Editor, und Sie werden sehen, dass Ihre Zellen gut ausgerichtet sind. Es ist dann einfach, die Felder durch Registerkarten zu teilen und durch etwas anderes zu ersetzen. Auf diese Weise können Sie sogar eine Tabelle daraus erstellen. Hier ist ein Beispiel mit 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);

Im Wesentlichen erstellt dieses Skript eine HTML-Tabelle aus eingefügten Excel-Daten.

Question 3

Als Antwort auf die Antwort von Tatu habe ich eine schnelle jsFiddle erstellt, um seine Lösung vorzustellen:

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

Unter OSX und Windows gibt es mehrere Arten von Zwischenablagen für verschiedene Arten von Inhalten. Wenn Sie Inhalte in Excel kopieren, werden die Daten im Klartext und in der HTML-Zwischenablage gespeichert.

Der richtige Weg (der nicht durch Trennzeichenprobleme ausgelöst wird) besteht darin, den HTML-Code zu analysieren. http://jsbin.com/uwuvan/5 ist eine einfache Demo, die zeigt, wie Sie die HTML-Zwischenablage erhalten. Der Schlüssel besteht darin, sich an das Ereignis onpaste zu binden und zu lesen

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

Question 5

Die gleiche Idee wie Tatu (danke, ich werde sie bald in unserem Projekt brauchen), aber mit einem regulären Ausdruck.
Was für große Datenmengen schneller sein kann.

<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

Für alle zukünftigen Googler, die hier wie ich landen, habe ich das Konzept von @tatu Ulmanen verwendet und es einfach in eine Reihe von Objekten verwandelt. Diese einfache Funktion verwendet eine Zeichenfolge eingefügter Excel- (oder Google Sheet-) Daten (vorzugsweise von a textarea) und wandelt sie in ein Array von Objekten um. Es verwendet die erste Zeile für Spalten- / Eigenschaftsnamen.

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;
}

Hoffentlich hilft es jemandem in der Zukunft.

Question 7

UPDATE: Dies gilt nur, wenn Sie ONLYOFFICE anstelle von MS Excel verwenden.

Es gibt tatsächlich einen Fluss in allen Antworten, die hier bereitgestellt werden, und auch in der akzeptierten. Wenn Sie eine leere Zelle in Excel haben und diese kopieren, befinden sich in der Zwischenablage zwei Tabulatorzeichen nebeneinander. Nach dem Teilen erhalten Sie also ein zusätzliches Element im Array, das dann als zusätzliche Zelle in dieser Zeile angezeigt wird und verschiebt alle anderen Zellen um eins. Um zu vermeiden, dass Sie grundsätzlich alle doppelten Tabulatorzeichen (nur Tabulatoren nebeneinander) in einer Zeichenfolge durch ein Tabulatorzeichen ersetzen und erst dann teilen müssen.

Eine aktualisierte Version von @ userfusers jsfiddle behebt dieses Problem, indem eingefügte Daten mit removeExtraTabs gefiltert werden

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 verfügt über eine Funktion auf der Registerkarte "Daten", die recht gut funktioniert.

Question 9

Das ausgraben, falls jemand in Zukunft darauf stößt. Ich habe den obigen Code wie beabsichtigt verwendet, bin dann aber auf ein Problem gestoßen, bei dem die Tabelle angezeigt wurde, nachdem sie an eine Datenbank gesendet wurde. Sobald Sie die Daten gespeichert haben, ist es viel einfacher, PHP zu verwenden, um die neuen Zeilen und Registerkarten in Ihrer Abfrage zu ersetzen. Sie können das Ersetzen bei der Übermittlung durchführen. $ _POST [Anfrage] ist der Name Ihres Textbereichs:

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

Fügen Sie jetzt einfach $ request in Ihre Datenbank ein und es wird als HTML-Tabelle gespeichert.

Question 10

Vielleicht wäre es besser, wenn Sie Ihre Excel-Datei aus PHP lesen und sie dann entweder in einer Datenbank speichern oder bearbeiten würden.

Hier ein ausführliches Tutorial zum Lesen und Schreiben von Excel-Daten mit PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Answer 1

86

Gibt es eine Standardmethode oder -bibliothek zum Kopieren und Einfügen aus einer Tabelle in ein Webformular? Wenn ich mehr als eine Zelle aus Excel auswähle, verliere ich (offensichtlich) das Trennzeichen und alles wird in eine Zelle des Webformulars eingefügt. Muss es in VB gemacht werden? oder könnte die Verarbeitung erfolgen, sobald die Einfügemaßnahme im Webformular gestartet wurde?

javascript html forms excel Seine Dudeness
quelle

Versuchen Sie etwas zu automatisieren? Können Sie ein besseres Beispiel geben ...

Dayton Brown

2

Ich hatte Angst, diese Frage zu stellen. Danke, dass Sie es getan haben und dass Sie so prägnant sind. :)

Nostalg.io

Answer 2

Versuchen Sie etwas zu automatisieren? Können Sie ein besseres Beispiel geben ...

Dayton Brown

Answer 3

2

Ich hatte Angst, diese Frage zu stellen. Danke, dass Sie es getan haben und dass Sie so prägnant sind. :)

Nostalg.io

Answer 4

91

Sie verlieren die Trennzeichen nicht, die Zellen werden durch Tabulatoren ( \t) und Zeilen durch Zeilenumbrüche ( \n) getrennt, die im Formular möglicherweise nicht sichtbar sind. Probieren Sie es selbst aus: Kopieren Sie Inhalte aus Excel in den Editor, und Sie werden sehen, dass Ihre Zellen gut ausgerichtet sind. Es ist dann einfach, die Felder durch Registerkarten zu teilen und durch etwas anderes zu ersetzen. Auf diese Weise können Sie sogar eine Tabelle daraus erstellen. Hier ist ein Beispiel mit 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);

Im Wesentlichen erstellt dieses Skript eine HTML-Tabelle aus eingefügten Excel-Daten.

Tatu Ulmanen
quelle

8

Ich habe mit einem ähnlichen Problem herumgespielt. Es ist erwähnenswert, dass Sie beim Einfügen in ein Textfeld die Zeilenumbrüche verlieren. Beim Einfügen in einen Textbereich behalten Sie diese bei.

Wobbily_col

Aus praktischen Gründen können Sie diese Antwort zu einem Ausschnitt für zukünftige Verwendungen machen.

AdrianoRR

1

Wenn sich in einer Zelle eine neue Zeile befindet, wird diese unterbrochen.

th3byrdm4n

Nur eine kurze Anmerkung dazu - funktioniert hervorragend, aber Excel fügt beim Kopieren von Daten eine nachfolgende Zeile hinzu, sodass Sie eine leere Zeile erhalten td. Nur zu

Ihrer Information

Dies ist eine kurze , aber kurzfristige Lösung, was passiert , wenn einer meiner Zellen enthält \ n darin

MeVimalkumar

Answer 5

8

Ich habe mit einem ähnlichen Problem herumgespielt. Es ist erwähnenswert, dass Sie beim Einfügen in ein Textfeld die Zeilenumbrüche verlieren. Beim Einfügen in einen Textbereich behalten Sie diese bei.

Wobbily_col

Answer 6

Aus praktischen Gründen können Sie diese Antwort zu einem Ausschnitt für zukünftige Verwendungen machen.

AdrianoRR

Answer 7

1

Wenn sich in einer Zelle eine neue Zeile befindet, wird diese unterbrochen.

th3byrdm4n

Answer 8

Nur eine kurze Anmerkung dazu - funktioniert hervorragend, aber Excel fügt beim Kopieren von Daten eine nachfolgende Zeile hinzu, sodass Sie eine leere Zeile erhalten td. Nur zu

Ihrer Information

Answer 9

Dies ist eine kurze , aber kurzfristige Lösung, was passiert , wenn einer meiner Zellen enthält \ n darin

MeVimalkumar

Answer 10

Als Antwort auf die Antwort von Tatu habe ich eine schnelle jsFiddle erstellt, um seine Lösung vorzustellen:

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

Und hier ist meine Ergänzung zu dieser Antwort, aber mit der automatischen Tabelle, die sofort beim Einfügen eines Ereignisses angezeigt wird : jsfiddle.net/sTX7y/690 Grundsätzlich simuliert es das Ereignis 'Nachpaste'.

Userfuser

Answer 12

12

Unter OSX und Windows gibt es mehrere Arten von Zwischenablagen für verschiedene Arten von Inhalten. Wenn Sie Inhalte in Excel kopieren, werden die Daten im Klartext und in der HTML-Zwischenablage gespeichert.

Der richtige Weg (der nicht durch Trennzeichenprobleme ausgelöst wird) besteht darin, den HTML-Code zu analysieren. http://jsbin.com/uwuvan/5 ist eine einfache Demo, die zeigt, wie Sie die HTML-Zwischenablage erhalten. Der Schlüssel besteht darin, sich an das Ereignis onpaste zu binden und zu lesen

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

SheetJS
quelle

Der jsbin funktionierte bei mir nicht wie erwartet (Firefox 42 unter Win 7, Excel 2013). Hat sich etwas Wichtiges geändert, seit Sie diese Antwort gepostet haben, wodurch dieser Ansatz nicht mehr funktioniert? In der Browserkonsole wird der Text / der einfache Inhalt protokolliert, aber der Text / HTML-Inhalt ist leer.

Christian Semrau

Dies funktioniert mit Chrome entweder unter Windows mit Excel oder unter Ubuntu mit libreOffice. Beste Lösung IMO, da alle Formatierungen der Originalblätter beibehalten werden.

BiAiB

diese ziemlich relevante Antwort, aber brauchen mehr Details

MeVimalkumar

Answer 13

Der jsbin funktionierte bei mir nicht wie erwartet (Firefox 42 unter Win 7, Excel 2013). Hat sich etwas Wichtiges geändert, seit Sie diese Antwort gepostet haben, wodurch dieser Ansatz nicht mehr funktioniert? In der Browserkonsole wird der Text / der einfache Inhalt protokolliert, aber der Text / HTML-Inhalt ist leer.

Christian Semrau

Answer 14

Dies funktioniert mit Chrome entweder unter Windows mit Excel oder unter Ubuntu mit libreOffice. Beste Lösung IMO, da alle Formatierungen der Originalblätter beibehalten werden.

BiAiB

Answer 15

diese ziemlich relevante Antwort, aber brauchen mehr Details

MeVimalkumar

Answer 16

8

Die gleiche Idee wie Tatu (danke, ich werde sie bald in unserem Projekt brauchen), aber mit einem regulären Ausdruck.
Was für große Datenmengen schneller sein kann.

<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>

Mic
quelle

Hallo Mic, das ist großartiger Code! Haben Sie einen Einblick, wie ich diese Tabellenkonvertierung in ein übertragbares Formular umsetzen könnte?

BvilleBullet

Dies hängt von dem Formular ab, das Sie senden möchten. Ich würde daraus einen String-JSON machen und ihn als einzelnes Feld auf dem Server veröffentlichen.

Mic

Dies funktioniert übrigens auch für eine Word-Tabelle (eines der alten "Formulare" meiner Benutzer, die wir konvertieren möchten). Vielen Dank.

Hugh Seagraves

Answer 17

Hallo Mic, das ist großartiger Code! Haben Sie einen Einblick, wie ich diese Tabellenkonvertierung in ein übertragbares Formular umsetzen könnte?

BvilleBullet

Answer 18

Dies hängt von dem Formular ab, das Sie senden möchten. Ich würde daraus einen String-JSON machen und ihn als einzelnes Feld auf dem Server veröffentlichen.

Mic

Answer 19

Dies funktioniert übrigens auch für eine Word-Tabelle (eines der alten "Formulare" meiner Benutzer, die wir konvertieren möchten). Vielen Dank.

Hugh Seagraves

Answer 20

Für alle zukünftigen Googler, die hier wie ich landen, habe ich das Konzept von @tatu Ulmanen verwendet und es einfach in eine Reihe von Objekten verwandelt. Diese einfache Funktion verwendet eine Zeichenfolge eingefügter Excel- (oder Google Sheet-) Daten (vorzugsweise von a textarea) und wandelt sie in ein Array von Objekten um. Es verwendet die erste Zeile für Spalten- / Eigenschaftsnamen.

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;
}

Hoffentlich hilft es jemandem in der Zukunft.

Answer 21

UPDATE: Dies gilt nur, wenn Sie ONLYOFFICE anstelle von MS Excel verwenden.

Es gibt tatsächlich einen Fluss in allen Antworten, die hier bereitgestellt werden, und auch in der akzeptierten. Wenn Sie eine leere Zelle in Excel haben und diese kopieren, befinden sich in der Zwischenablage zwei Tabulatorzeichen nebeneinander. Nach dem Teilen erhalten Sie also ein zusätzliches Element im Array, das dann als zusätzliche Zelle in dieser Zeile angezeigt wird und verschiebt alle anderen Zellen um eins. Um zu vermeiden, dass Sie grundsätzlich alle doppelten Tabulatorzeichen (nur Tabulatoren nebeneinander) in einer Zeichenfolge durch ein Tabulatorzeichen ersetzen und erst dann teilen müssen.

Eine aktualisierte Version von @ userfusers jsfiddle behebt dieses Problem, indem eingefügte Daten mit removeExtraTabs gefiltert werden

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

Ich habe tatsächlich herausgefunden, dass dies nur passiert, wenn Sie aus der Tabelle der ONLYOFFICE-Software kopieren. Hmm .. Lass das hier, falls jemand darauf stößt.

Aram

Answer 23

0

Excel 2007 verfügt über eine Funktion auf der Registerkarte "Daten", die recht gut funktioniert.

LeWoody
quelle

Answer 24

Das ausgraben, falls jemand in Zukunft darauf stößt. Ich habe den obigen Code wie beabsichtigt verwendet, bin dann aber auf ein Problem gestoßen, bei dem die Tabelle angezeigt wurde, nachdem sie an eine Datenbank gesendet wurde. Sobald Sie die Daten gespeichert haben, ist es viel einfacher, PHP zu verwenden, um die neuen Zeilen und Registerkarten in Ihrer Abfrage zu ersetzen. Sie können das Ersetzen bei der Übermittlung durchführen. $ _POST [Anfrage] ist der Name Ihres Textbereichs:

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

Fügen Sie jetzt einfach $ request in Ihre Datenbank ein und es wird als HTML-Tabelle gespeichert.

Answer 25

-1

Vielleicht wäre es besser, wenn Sie Ihre Excel-Datei aus PHP lesen und sie dann entweder in einer Datenbank speichern oder bearbeiten würden.

Hier ein ausführliches Tutorial zum Lesen und Schreiben von Excel-Daten mit PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Adnan
quelle

Das ist eine absolut schreckliche Lösung. Ich bin zu diesem Thread gekommen, während ich dies gerade mache, und er ist unglaublich fehleranfällig. Excel spuckt Zahlen manchmal als Ganzzahlen aus, manchmal als Gleitkommazahlen, manchmal als Zeichenfolgen.

Wobbily_col

Es gelten auch Benutzerszenarien, in denen Sie aus unzuverlässigen Quellen wie Ihrer Bank einfügen müssen, deren XLS / CSV-Dateien voller Mist sind, der manuell gesiebt werden muss

ZJR

Answer 26

Das ist eine absolut schreckliche Lösung. Ich bin zu diesem Thread gekommen, während ich dies gerade mache, und er ist unglaublich fehleranfällig. Excel spuckt Zahlen manchmal als Ganzzahlen aus, manchmal als Gleitkommazahlen, manchmal als Zeichenfolgen.

Wobbily_col

Answer 27

Es gelten auch Benutzerszenarien, in denen Sie aus unzuverlässigen Quellen wie Ihrer Bank einfügen müssen, deren XLS / CSV-Dateien voller Mist sind, der manuell gesiebt werden muss

ZJR

Kopieren / Einfügen aus Excel auf eine Webseite

Antworten: