portapapeles pegar javascript html forms excel

javascript - pegar - clipboard js



Copiar/Pegar desde Excel en una página web (9)

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


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 el aceptado. El flujo es que cada vez que tiene una celda vacía en Excel y copia eso, en el portapapeles tiene 2 caracteres de tabulación 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 extra en esa fila y mueve todas las otras celdas en una. Entonces, para evitar eso, básicamente necesitas reemplazar todas las pestañas de dos pestañas (pestañas una al lado de la otra) en una cadena con una sola pestaña y luego solo dividirla.

Una versión actualizada de jsfiddle de @userfuser está aquí para solucionar ese problema mediante el filtrado de 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''); }) }) })


Desenterrando esto, en caso de que alguien lo encuentre en el futuro. Utilicé el código anterior como estaba previsto, pero luego me encontré con un problema que mostraba la tabla después de haber sido enviado a una base de datos. Es mucho más fácil una vez que haya almacenado los datos para usar PHP para reemplazar las nuevas líneas y pestañas en su consulta. Puede realizar el reemplazo al momento del envío, $ _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 solo inserte $ request en su base de datos, y se almacenará como una tabla HTML.


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 plano y en el portapapeles html.

La forma correcta (que no se dispare por problemas de delimitador) 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 vincularse al evento onpass y leer

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


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


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


La misma idea que Tatu (gracias, lo necesitaré pronto en nuestro proyecto), pero con una expresión regular.
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>


Para cualquier futuro googlers que termine aquí como yo, utilicé el concepto de @tatu Ulmanen y simplemente lo convertí en una matriz de objetos. Esta función simple toma una cadena de datos pegados de Excel (o hoja de Google) (preferiblemente de un área de 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; }

Espero que ayude a alguien en el futuro.



No pierde los delimitadores, las celdas están separadas por pestañas ( /t ) y 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. Es fácil dividir los campos por pestañas y reemplazarlos por otra cosa, de esta manera puedes 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.