Copiar / colar do Excel para uma página da web

Question 1

Existe uma maneira ou biblioteca padrão de copiar e colar de uma planilha em um formulário da web? Quando seleciono mais de uma célula no Excel, (obviamente) perco o delimitador e tudo é colado em uma célula do formulário da web. Tem que ser feito em VB? ou o processamento poderia ser feito quando a ação de colar for iniciada no formulário da web?

Question 2

Você não perde os delimitadores, as células são separadas por tabulações ( \t) e linhas por novas linhas ( \n) que podem não estar visíveis no formulário. Experimente você mesmo: copie o conteúdo do Excel para o Bloco de notas e verá suas células bem alinhadas. É fácil então dividir os campos por tabulações e substituí-los por outra coisa, desta forma você pode construir até mesmo uma tabela a partir deles. Aqui está um exemplo 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);

Então, em essência, esse script cria uma tabela HTML a partir de dados colados do Excel.

Question 3

Em resposta à resposta de Tatu, criei um jsFiddle rápido para apresentar sua solução:

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

No OSX e no Windows , existem vários tipos de pranchetas para diferentes tipos de conteúdo. Quando você copia conteúdo no Excel, os dados são armazenados em texto simples e na área de transferência html.

A maneira certa (que não é confundida por problemas de delimitador) é analisar o HTML. http://jsbin.com/uwuvan/5 é uma demonstração simples que mostra como obter a área de transferência HTML. A chave é ligar-se ao evento onpaste e ler

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

Question 5

A mesma ideia do Tatu (obrigado vou precisar dela em breve no nosso projeto), mas com uma expressão regular.
O que pode ser mais rápido para grandes conjuntos de dados.

<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 qualquer futuro googler que acabe aqui como eu, usei o conceito de @tatu Ulmanen e apenas o transformei em uma série de objetos. Essa função simples pega uma string de dados colados do Excel (ou planilha do Google) (de preferência de a textarea) e os transforma em uma matriz de objetos. Ele usa a primeira linha para nomes de coluna / propriedade.

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 ajude alguém no futuro.

Question 7

ATUALIZAÇÃO: Isso só é verdadeiro se você usar o ONLYOFFICE em vez do MS Excel.

Na verdade, há um fluxo em todas as respostas fornecidas aqui e também na aceita. O fluxo é que sempre que você tiver uma célula vazia no excel e copiá-la, na área de transferência você terá 2 caracteres de guia um ao lado do outro, então após a divisão você obtém um item adicional no array, que aparece como uma célula extra naquela linha e move todas as outras células em uma. Então, para evitar isso, você basicamente precisa substituir todos os caracteres de tabulação dupla (tabulações ao lado uma da outra) em uma string por um caractere de tabulação e só então dividi-lo.

Uma versão atualizada do jsfiddle de @ userfuser está aqui para corrigir esse problema, filtrando os dados colados com 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

O Excel 2007 possui um recurso para fazer isso na guia "Dados" que funciona muito bem.

Question 9

Desenterrando isso, caso alguém encontre no futuro. Usei o código acima conforme planejado, mas tive um problema ao exibir a tabela depois que ela foi enviada a um banco de dados. É muito mais fácil depois de armazenar os dados para usar o PHP para substituir as novas linhas e guias em sua consulta. Você pode realizar a substituição após o envio, $ _POST [solicitação] seria o nome de sua área de texto:

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

Agora, basta inserir $ request em seu banco de dados e ele será armazenado como uma tabela HTML.

Question 10

Talvez seja melhor se você ler seu arquivo Excel do PHP e salvá-lo em um banco de dados ou processá-lo.

aqui, um tutorial detalhado sobre como ler e gravar dados do Excel com PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Answer 1

88

Existe uma maneira ou biblioteca padrão de copiar e colar de uma planilha em um formulário da web? Quando seleciono mais de uma célula no Excel, (obviamente) perco o delimitador e tudo é colado em uma célula do formulário da web. Tem que ser feito em VB? ou o processamento poderia ser feito quando a ação de colar for iniciada no formulário da web?

javascript html forms excel Sua estupidez
fonte

Você está tentando automatizar algo? Você pode dar um exemplo melhor ...

Dayton Brown

2

Eu estava com medo de fazer essa pergunta. Obrigado por fazer isso e por ser tão conciso. :)

Nostalg.io

Answer 2

Você está tentando automatizar algo? Você pode dar um exemplo melhor ...

Dayton Brown

Answer 3

2

Eu estava com medo de fazer essa pergunta. Obrigado por fazer isso e por ser tão conciso. :)

Nostalg.io

Answer 4

93

Você não perde os delimitadores, as células são separadas por tabulações ( \t) e linhas por novas linhas ( \n) que podem não estar visíveis no formulário. Experimente você mesmo: copie o conteúdo do Excel para o Bloco de notas e verá suas células bem alinhadas. É fácil então dividir os campos por tabulações e substituí-los por outra coisa, desta forma você pode construir até mesmo uma tabela a partir deles. Aqui está um exemplo 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);

Então, em essência, esse script cria uma tabela HTML a partir de dados colados do Excel.

Tatu Ulmanen
fonte

9

Eu tenho tentado resolver um problema semelhante, é importante notar que, ao colar em uma caixa de texto, você perde as novas linhas. Ao colar em uma área de texto, você os mantém.

wobbily_col

Por motivos práticos, você pode transformar esta resposta em um snippet para uso futuro.

AdrianoRR

1

Se houver uma nova linha dentro de uma célula, ela será quebrada.

th3byrdm4n

Apenas uma nota rápida sobre isso - funciona perfeitamente, mas o Excel adiciona uma linha final quando os dados são copiados, de forma que você acaba com um vazio td. Apenas para sua informação

jg2703

esta é uma solução rápida, mas de curto prazo, e se uma das minhas células contiver \ n nela

MeVimalkumar

Answer 5

9

Eu tenho tentado resolver um problema semelhante, é importante notar que, ao colar em uma caixa de texto, você perde as novas linhas. Ao colar em uma área de texto, você os mantém.

wobbily_col

Answer 6

Por motivos práticos, você pode transformar esta resposta em um snippet para uso futuro.

AdrianoRR

Answer 7

1

Se houver uma nova linha dentro de uma célula, ela será quebrada.

th3byrdm4n

Answer 8

Apenas uma nota rápida sobre isso - funciona perfeitamente, mas o Excel adiciona uma linha final quando os dados são copiados, de forma que você acaba com um vazio td. Apenas para sua informação

jg2703

Answer 9

esta é uma solução rápida, mas de curto prazo, e se uma das minhas células contiver \ n nela

MeVimalkumar

Answer 10

Em resposta à resposta de Tatu, criei um jsFiddle rápido para apresentar sua solução:

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

E aqui está o meu acréscimo a esta resposta, mas com a tabela automática sendo exibida, imediatamente no evento de colar: jsfiddle.net/sTX7y/690 Basicamente, ele simula o evento 'afterpaste'.

userfuser

Answer 12

12

No OSX e no Windows , existem vários tipos de pranchetas para diferentes tipos de conteúdo. Quando você copia conteúdo no Excel, os dados são armazenados em texto simples e na área de transferência html.

A maneira certa (que não é confundida por problemas de delimitador) é analisar o HTML. http://jsbin.com/uwuvan/5 é uma demonstração simples que mostra como obter a área de transferência HTML. A chave é ligar-se ao evento onpaste e ler

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

SheetJS
fonte

O jsbin não funcionou como esperado para mim (Firefox 42 no Win 7, Excel 2013). Algo importante mudou desde que você postou esta resposta, o que faz com que essa abordagem não funcione mais? No console do navegador, vejo o conteúdo text / plain registrado, mas o conteúdo text / html está vazio.

Christian Semrau

Isso funciona com o Chrome no Windows com Excel ou no Ubuntu com libreOffice. Melhor solução IMO, já que mantém toda a formatação das folhas originais.

BiAiB de

esta resposta é bastante relevante, mas precisa de mais detalhes

MeVimalkumar

Answer 13

O jsbin não funcionou como esperado para mim (Firefox 42 no Win 7, Excel 2013). Algo importante mudou desde que você postou esta resposta, o que faz com que essa abordagem não funcione mais? No console do navegador, vejo o conteúdo text / plain registrado, mas o conteúdo text / html está vazio.

Christian Semrau

Answer 14

Isso funciona com o Chrome no Windows com Excel ou no Ubuntu com libreOffice. Melhor solução IMO, já que mantém toda a formatação das folhas originais.

BiAiB de

Answer 15

esta resposta é bastante relevante, mas precisa de mais detalhes

MeVimalkumar

Answer 16

8

A mesma ideia do Tatu (obrigado vou precisar dela em breve no nosso projeto), mas com uma expressão regular.
O que pode ser mais rápido para grandes conjuntos de dados.

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

Microfone
fonte

Olá Mic, este é um código excelente! Você tem alguma ideia de como eu poderia transformar essa conversão de tabela em um formulário submetível?

BvilleBullet

depende do formulário que você deseja enviar. Eu faria um json stringificado com isso, e postaria como um único campo para o servidor.

Mic

A propósito, isso também funciona para uma tabela do Word (um dos "formulários" legados de meus usuários que estamos tentando converter). Obrigado.

Hugh Seagraves

Answer 17

Olá Mic, este é um código excelente! Você tem alguma ideia de como eu poderia transformar essa conversão de tabela em um formulário submetível?

BvilleBullet

Answer 18

depende do formulário que você deseja enviar. Eu faria um json stringificado com isso, e postaria como um único campo para o servidor.

Mic

Answer 19

A propósito, isso também funciona para uma tabela do Word (um dos "formulários" legados de meus usuários que estamos tentando converter). Obrigado.

Hugh Seagraves

Answer 20

Para qualquer futuro googler que acabe aqui como eu, usei o conceito de @tatu Ulmanen e apenas o transformei em uma série de objetos. Essa função simples pega uma string de dados colados do Excel (ou planilha do Google) (de preferência de a textarea) e os transforma em uma matriz de objetos. Ele usa a primeira linha para nomes de coluna / propriedade.

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 ajude alguém no futuro.

Answer 21

ATUALIZAÇÃO: Isso só é verdadeiro se você usar o ONLYOFFICE em vez do MS Excel.

Na verdade, há um fluxo em todas as respostas fornecidas aqui e também na aceita. O fluxo é que sempre que você tiver uma célula vazia no excel e copiá-la, na área de transferência você terá 2 caracteres de guia um ao lado do outro, então após a divisão você obtém um item adicional no array, que aparece como uma célula extra naquela linha e move todas as outras células em uma. Então, para evitar isso, você basicamente precisa substituir todos os caracteres de tabulação dupla (tabulações ao lado uma da outra) em uma string por um caractere de tabulação e só então dividi-lo.

Uma versão atualizada do jsfiddle de @ userfuser está aqui para corrigir esse problema, filtrando os dados colados com 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

Na verdade, descobri que isso acontece apenas se você copiar da planilha do software ONLYOFFICE. Hmm .. Deixando isso aqui no caso de alguém topar com isso.

Aram

Answer 23

0

O Excel 2007 possui um recurso para fazer isso na guia "Dados" que funciona muito bem.

LeWoody
fonte

Answer 24

Desenterrando isso, caso alguém encontre no futuro. Usei o código acima conforme planejado, mas tive um problema ao exibir a tabela depois que ela foi enviada a um banco de dados. É muito mais fácil depois de armazenar os dados para usar o PHP para substituir as novas linhas e guias em sua consulta. Você pode realizar a substituição após o envio, $ _POST [solicitação] seria o nome de sua área de texto:

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

Agora, basta inserir $ request em seu banco de dados e ele será armazenado como uma tabela HTML.

Answer 25

-1

Talvez seja melhor se você ler seu arquivo Excel do PHP e salvá-lo em um banco de dados ou processá-lo.

aqui, um tutorial detalhado sobre como ler e gravar dados do Excel com PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Adnan
fonte

Essa é uma solução absolutamente terrível. Eu vim para este tópico enquanto estou fazendo isso e é incrivelmente sujeito a erros. O Excel às vezes cospe números como inteiros, às vezes como flutuantes, às vezes como strings.

wobbily_col

também os cenários de usuário se aplicam, onde você precisa colar de fontes não confiáveis, como seu banco, cujos arquivos xls / csv estão cheios de porcaria que precisam ser peneirados manualmente

ZJR

Answer 26

Essa é uma solução absolutamente terrível. Eu vim para este tópico enquanto estou fazendo isso e é incrivelmente sujeito a erros. O Excel às vezes cospe números como inteiros, às vezes como flutuantes, às vezes como strings.

wobbily_col

Answer 27

também os cenários de usuário se aplicam, onde você precisa colar de fontes não confiáveis, como seu banco, cujos arquivos xls / csv estão cheios de porcaria que precisam ser peneirados manualmente

ZJR

Copiar / colar do Excel para uma página da web

Respostas: