Copiar / Pegar desde Excel a una página web

Question 1

¿Existe una forma estándar o una biblioteca para copiar y pegar desde una hoja de cálculo a un formulario web? Cuando selecciono más de una celda de Excel, (obviamente) pierdo el delimitador y todo se pega en una celda del formulario web. ¿Tiene que hacerse en VB? ¿O podría realizarse el procesamiento una vez que se inicia la acción de pegar en el formulario web?

Question 2

No pierde los delimitadores, las celdas están separadas por tabulaciones ( \t) y las filas por líneas nuevas ( \n) que pueden no ser visibles en el formulario. Pruébelo usted mismo: copie el contenido de Excel al Bloc de notas y verá sus celdas bien alineadas. Entonces, es fácil dividir los campos por pestañas y reemplazarlos con otra cosa, de esta manera puede construir incluso una tabla a partir de ellos. Aquí hay un ejemplo usando 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);

Entonces, en esencia, este script crea una tabla HTML a partir de datos de Excel pegados.

Question 3

En respuesta a la respuesta de Tatu, he creado un jsFiddle rápido para mostrar su solución:

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

En OSX y Windows , hay varios tipos de portapapeles para diferentes tipos de contenido. Cuando copia contenido en Excel, los datos se almacenan en texto sin formato y en el portapapeles html.

La forma correcta (que no se tropieza con problemas de delimitadores) es analizar el HTML. http://jsbin.com/uwuvan/5 es una demostración simple que muestra cómo obtener el portapapeles HTML. La clave es unirse al evento onpaste y leer

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

Question 5

La misma idea que Tatu (gracias la necesitaré pronto en nuestro proyecto), pero con una expresión regular.
Lo que puede ser más rápido para grandes conjuntos de datos.

<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

Para cualquier futuro googlers que termine aquí como yo, utilicé el concepto de @tatu Ulmanen y lo convertí en una serie de objetos. Esta función simple toma una cadena de datos pegados de Excel (u hoja de Google) (preferiblemente de a textarea) y los convierte en una matriz de objetos. Utiliza la primera fila para los nombres de columna / propiedad.

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

Ojalá ayude a alguien en el futuro.

Question 7

ACTUALIZACIÓN: Esto solo es cierto si usa ONLYOFFICE en lugar de MS Excel.

En realidad, hay un flujo en todas las respuestas proporcionadas aquí y también en la aceptada. El flujo es que cada vez que tiene una celda vacía en Excel y la copia, en el portapapeles tiene 2 caracteres de pestaña uno al lado del otro, por lo que después de dividir obtiene un elemento adicional en la matriz, que luego aparece como una celda adicional en esa fila. y mueve todas las demás celdas en una. Entonces, para evitar eso, básicamente necesita reemplazar todos los caracteres de doble pestaña (solo pestañas una al lado de la otra) en una cadena con un carácter de pestaña y solo luego dividirlo.

Una versión actualizada de jsfiddle de @ userfuser está aquí para solucionar ese problema al filtrar los datos pegados con 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 tiene una función para hacer esto en la pestaña "Datos" que funciona bastante bien.

Question 9

Desenterrando esto, en caso de que alguien lo encuentre en el futuro. Utilicé el código anterior según lo previsto, pero luego encontré un problema al mostrar la tabla después de haberla enviado a una base de datos. Una vez que haya almacenado los datos, es mucho más fácil usar PHP para reemplazar las nuevas líneas y pestañas en su consulta. Puede realizar el reemplazo al enviarlo, $ _POST [solicitud] sería el nombre de su área de texto:

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

Ahora simplemente inserte $ request en su base de datos y se almacenará como una tabla HTML.

Question 10

Tal vez sería mejor leer su archivo de Excel desde PHP y luego guardarlo en una base de datos o procesarlo.

aquí un tutorial detallado sobre cómo leer y escribir datos de Excel con PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Answer 1

88

¿Existe una forma estándar o una biblioteca para copiar y pegar desde una hoja de cálculo a un formulario web? Cuando selecciono más de una celda de Excel, (obviamente) pierdo el delimitador y todo se pega en una celda del formulario web. ¿Tiene que hacerse en VB? ¿O podría realizarse el procesamiento una vez que se inicia la acción de pegar en el formulario web?

javascript html forms excel Su amabilidad
fuente

¿Estás intentando automatizar algo? ¿Puede dar un mejor ejemplo ...

Dayton Brown

2

Tenía miedo de hacer esta pregunta. Gracias por hacerlo y por ser tan conciso. :)

Nostalg.io

Answer 2

¿Estás intentando automatizar algo? ¿Puede dar un mejor ejemplo ...

Dayton Brown

Answer 3

2

Tenía miedo de hacer esta pregunta. Gracias por hacerlo y por ser tan conciso. :)

Nostalg.io

Answer 4

93

No pierde los delimitadores, las celdas están separadas por tabulaciones ( \t) y las filas por líneas nuevas ( \n) que pueden no ser visibles en el formulario. Pruébelo usted mismo: copie el contenido de Excel al Bloc de notas y verá sus celdas bien alineadas. Entonces, es fácil dividir los campos por pestañas y reemplazarlos con otra cosa, de esta manera puede construir incluso una tabla a partir de ellos. Aquí hay un ejemplo usando 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);

Entonces, en esencia, este script crea una tabla HTML a partir de datos de Excel pegados.

Tatu Ulmanen
fuente

9

He estado jugando con un problema similar, vale la pena señalar que, al pegar en un cuadro de texto, pierdes las nuevas líneas. Al pegarlos en un área de texto, los conserva.

wobbily_col

Por razones prácticas, puede convertir esta respuesta en un fragmento para usos futuros.

AdrianoRR

1

Si hay una nueva línea dentro de una celda, se rompe.

th3byrdm4n

Solo una nota rápida sobre esto: funciona de manera brillante, pero Excel agrega una fila final cuando se copian los datos, por lo que termina con un vacío td. Solo para su información

jg2703

esta es una solución rápida pero a corto plazo, ¿qué pasa si una de mis celdas contiene \ n?

MeVimalkumar

Answer 5

9

He estado jugando con un problema similar, vale la pena señalar que, al pegar en un cuadro de texto, pierdes las nuevas líneas. Al pegarlos en un área de texto, los conserva.

wobbily_col

Answer 6

Por razones prácticas, puede convertir esta respuesta en un fragmento para usos futuros.

AdrianoRR

Answer 7

1

Si hay una nueva línea dentro de una celda, se rompe.

th3byrdm4n

Answer 8

Solo una nota rápida sobre esto: funciona de manera brillante, pero Excel agrega una fila final cuando se copian los datos, por lo que termina con un vacío td. Solo para su información

jg2703

Answer 9

esta es una solución rápida pero a corto plazo, ¿qué pasa si una de mis celdas contiene \ n?

MeVimalkumar

Answer 10

En respuesta a la respuesta de Tatu, he creado un jsFiddle rápido para mostrar su solución:

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

Y aquí está mi adición a esta respuesta, pero con la tabla automática que se muestra, inmediatamente en el evento de pegar: jsfiddle.net/sTX7y/690 Básicamente, simula el evento 'afterpaste'.

userfuser

Answer 12

12

En OSX y Windows , hay varios tipos de portapapeles para diferentes tipos de contenido. Cuando copia contenido en Excel, los datos se almacenan en texto sin formato y en el portapapeles html.

La forma correcta (que no se tropieza con problemas de delimitadores) es analizar el HTML. http://jsbin.com/uwuvan/5 es una demostración simple que muestra cómo obtener el portapapeles HTML. La clave es unirse al evento onpaste y leer

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

SheetJS
fuente

El jsbin no funcionó como se esperaba para mí (Firefox 42 en Win 7, Excel 2013). ¿Ha cambiado algo importante desde que publicó esta respuesta, lo que hace que este enfoque ya no funcione? En la consola del navegador, veo el texto / contenido sin formato registrado, pero el contenido de texto / html está vacío.

Christian Semrau

Esto funciona con Chrome en Windows con Excel o en Ubuntu con libreOffice. La mejor solución en mi opinión, ya que mantiene todo el formato de las hojas originales.

BiAiB

esta respuesta bastante relevante pero necesita más detalles

MeVimalkumar

Answer 13

El jsbin no funcionó como se esperaba para mí (Firefox 42 en Win 7, Excel 2013). ¿Ha cambiado algo importante desde que publicó esta respuesta, lo que hace que este enfoque ya no funcione? En la consola del navegador, veo el texto / contenido sin formato registrado, pero el contenido de texto / html está vacío.

Christian Semrau

Answer 14

Esto funciona con Chrome en Windows con Excel o en Ubuntu con libreOffice. La mejor solución en mi opinión, ya que mantiene todo el formato de las hojas originales.

BiAiB

Answer 15

esta respuesta bastante relevante pero necesita más detalles

MeVimalkumar

Answer 16

8

La misma idea que Tatu (gracias la necesitaré pronto en nuestro proyecto), pero con una expresión regular.
Lo que puede ser más rápido para grandes conjuntos de datos.

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

Micrófono
fuente

Hola Mic, ¡este es un gran código! ¿Tiene alguna idea de cómo podría convertir esta tabla en una forma submitable?

BvilleBullet

depende del formulario que desee enviar. Haría un json en cadena a partir de eso y lo publicaría como un solo campo en el servidor.

Micrófono

Por cierto, esto también funciona para una tabla de Word (uno de los "formularios" heredados de mis usuarios que estamos tratando de convertir). Gracias.

Hugh Seagraves

Answer 17

Hola Mic, ¡este es un gran código! ¿Tiene alguna idea de cómo podría convertir esta tabla en una forma submitable?

BvilleBullet

Answer 18

depende del formulario que desee enviar. Haría un json en cadena a partir de eso y lo publicaría como un solo campo en el servidor.

Micrófono

Answer 19

Por cierto, esto también funciona para una tabla de Word (uno de los "formularios" heredados de mis usuarios que estamos tratando de convertir). Gracias.

Hugh Seagraves

Answer 20

Para cualquier futuro googlers que termine aquí como yo, utilicé el concepto de @tatu Ulmanen y lo convertí en una serie de objetos. Esta función simple toma una cadena de datos pegados de Excel (u hoja de Google) (preferiblemente de a textarea) y los convierte en una matriz de objetos. Utiliza la primera fila para los nombres de columna / propiedad.

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

Ojalá ayude a alguien en el futuro.

Answer 21

ACTUALIZACIÓN: Esto solo es cierto si usa ONLYOFFICE en lugar de MS Excel.

En realidad, hay un flujo en todas las respuestas proporcionadas aquí y también en la aceptada. El flujo es que cada vez que tiene una celda vacía en Excel y la copia, en el portapapeles tiene 2 caracteres de pestaña uno al lado del otro, por lo que después de dividir obtiene un elemento adicional en la matriz, que luego aparece como una celda adicional en esa fila. y mueve todas las demás celdas en una. Entonces, para evitar eso, básicamente necesita reemplazar todos los caracteres de doble pestaña (solo pestañas una al lado de la otra) en una cadena con un carácter de pestaña y solo luego dividirlo.

Una versión actualizada de jsfiddle de @ userfuser está aquí para solucionar ese problema al filtrar los datos pegados con 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

De hecho, descubrí que esto sucede solo si copia desde la hoja de cálculo del software ONLYOFFICE. Hmm ... Dejando esto aquí en caso de que alguien se tope con él.

Aram

Answer 23

0

Excel 2007 tiene una función para hacer esto en la pestaña "Datos" que funciona bastante bien.

LeWoody
fuente

Answer 24

Desenterrando esto, en caso de que alguien lo encuentre en el futuro. Utilicé el código anterior según lo previsto, pero luego encontré un problema al mostrar la tabla después de haberla enviado a una base de datos. Una vez que haya almacenado los datos, es mucho más fácil usar PHP para reemplazar las nuevas líneas y pestañas en su consulta. Puede realizar el reemplazo al enviarlo, $ _POST [solicitud] sería el nombre de su área de texto:

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

Ahora simplemente inserte $ request en su base de datos y se almacenará como una tabla HTML.

Answer 25

-1

Tal vez sería mejor leer su archivo de Excel desde PHP y luego guardarlo en una base de datos o procesarlo.

aquí un tutorial detallado sobre cómo leer y escribir datos de Excel con PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Adnan
fuente

Esa es una solución absolutamente terrible. Llegué a este hilo porque actualmente estoy haciendo esto y es increíblemente propenso a errores. Excel a veces escupe números como enteros, a veces como flotantes a veces como cadenas.

wobbily_col

también se aplican escenarios de usuario, donde necesita pegar de fuentes no confiables, como su banco, cuyos archivos xls / csv están llenos de basura que deben tamizarse manualmente

ZJR

Answer 26

Esa es una solución absolutamente terrible. Llegué a este hilo porque actualmente estoy haciendo esto y es increíblemente propenso a errores. Excel a veces escupe números como enteros, a veces como flotantes a veces como cadenas.

wobbily_col

Answer 27

también se aplican escenarios de usuario, donde necesita pegar de fuentes no confiables, como su banco, cuyos archivos xls / csv están llenos de basura que deben tamizarse manualmente

ZJR

Copiar / Pegar desde Excel a una página web

Respuestas: