Salin / Tempel dari Excel ke halaman web

89

Apakah ada cara standar atau pustaka untuk menyalin dan menempelkan dari lembar spreasheet ke formulir web? Ketika saya memilih lebih dari satu sel dari Excel I (jelas) kehilangan pembatas dan semua disisipkan ke dalam satu sel formulir web. Apakah itu harus dilakukan di VB? atau dapatkah pemrosesan dilakukan setelah tindakan tempel dimulai di formulir web?

javascript html forms excel Ketolosannya
sumber
Apakah Anda mencoba mengotomatiskan sesuatu? Dapatkah Anda memberikan contoh yang lebih baik ...
Dayton Brown
2
Saya takut untuk menanyakan pertanyaan ini. Terima kasih telah melakukannya, dan karena begitu ringkas. :)
Nostalg.io

Jawaban:

94

Anda tidak kehilangan pemisah, sel dipisahkan oleh tab ( \t) dan baris oleh baris baru ( \n) yang mungkin tidak terlihat di formulir. Cobalah sendiri: salin konten dari Excel ke Notepad, dan Anda akan melihat sel Anda berbaris rapi. Maka mudah untuk membagi bidang dengan tab dan menggantinya dengan yang lain, dengan cara ini Anda bahkan dapat membuat tabel dari mereka. Berikut contoh menggunakan 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);

Jadi intinya, script ini membuat tabel HTML dari data Excel yang ditempelkan.

Tatu Ulmanen
sumber
9
Saya telah bermain-main dengan masalah yang sama, perlu diperhatikan, menempelkan ke kotak teks, Anda kehilangan baris baru. Saat menempelkan ke area teks, Anda menyimpannya.
wobbily_col
Untuk alasan praktis, Anda dapat menjadikan jawaban ini cuplikan untuk penggunaan di masa mendatang.
AdrianoRR
1
Jika ada baris baru di dalam sel, ini akan rusak.
th3byrdm4n
Hanya catatan singkat tentang ini - berfungsi dengan sangat baik tetapi Excel menambahkan baris trailing saat data disalin sehingga Anda berakhir dengan kosong td. FYI
jg2703
ini adalah solusi cepat tapi jangka pendek, bagaimana jika salah satu sel saya mengandung \ n di dalamnya
MeVimalkumar
27

Menanggapi jawaban oleh Tatu, saya telah membuat jsFiddle cepat untuk menampilkan solusinya:

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);
}
dunderwood
sumber
3
Dan inilah tambahan saya untuk jawaban ini, tetapi dengan tabel otomatis yang muncul, langsung di acara tempel: jsfiddle.net/sTX7y/690 Pada dasarnya, ini mensimulasikan acara 'sisa pasta'.
userfuser
12

Di OSX dan Windows , ada beberapa jenis papan klip untuk berbagai jenis konten. Saat Anda menyalin konten di Excel, data disimpan dalam teks biasa dan di papan klip html.

Cara yang benar (yang tidak tersandung oleh masalah pembatas) adalah dengan mengurai HTML. http://jsbin.com/uwuvan/5 adalah demo sederhana yang menunjukkan bagaimana mendapatkan clipboard HTML. Kuncinya adalah mengikat acara onpaste dan membaca

event.clipboardData.getData('text/html')
SheetJS
sumber
Jsbin tidak berfungsi seperti yang diharapkan untuk saya (Firefox 42 di Win 7, Excel 2013). Apakah sesuatu yang penting berubah sejak Anda memposting jawaban ini, yang membuat pendekatan ini tidak berfungsi lagi? Di konsol browser, saya melihat teks / konten biasa dicatat, tetapi konten teks / html kosong.
Christian Semrau
Ini berfungsi dengan chrome baik di windows dengan excel atau di ubuntu dengan libreOffice. Solusi terbaik IMO, karena itu menyimpan semua pemformatan dari lembar asli.
BiAiB
jawaban ini cukup relevan tetapi perlu lebih detail
MeVimalkumar
8

Ide yang sama dengan Tatu (terima kasih, saya akan membutuhkannya segera di proyek kami), tetapi dengan ekspresi reguler.
Yang mungkin lebih cepat untuk kumpulan data besar.

<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>
Mikrofon
sumber
Hai Mic, ini kode yang bagus! Apakah Anda memiliki wawasan tentang bagaimana saya dapat mengubah tabel konversi ini menjadi formulir yang dapat dikirim?
BvilleBullet
itu tergantung pada formulir yang ingin Anda kirimkan. Saya akan membuat json yang dirangkai dari itu, dan mempostingnya sebagai satu bidang ke server.
Mikrofon
Ngomong-ngomong, ini juga berfungsi untuk tabel Word (salah satu "formulir" warisan pengguna saya yang sedang kami coba ubah). Terima kasih.
Hugh Seagraves
5

Untuk setiap calon karyawan Google yang berakhir di sini seperti saya, saya menggunakan konsep @tatu Ulmanen dan mengubahnya menjadi serangkaian objek. Fungsi sederhana ini mengambil string data excel (atau Google sheet) yang ditempelkan (sebaiknya dari a textarea) dan mengubahnya menjadi array objek. Ini menggunakan baris pertama untuk nama kolom / properti.

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

Semoga membantu seseorang di masa depan.

Mendekut
sumber
1

UPDATE: Ini hanya berlaku jika Anda menggunakan ONLYOFFICE daripada MS Excel.

Sebenarnya ada aliran dalam semua jawaban yang diberikan di sini dan juga di jawaban yang diterima. Alurnya adalah setiap kali Anda memiliki sel kosong di excel dan menyalinnya, di clipboard Anda memiliki 2 karakter tab di samping satu sama lain, jadi setelah memisahkan Anda mendapatkan satu item tambahan dalam array, yang kemudian muncul sebagai sel ekstra di baris itu. dan memindahkan semua sel lain satu per satu. Jadi untuk menghindari itu pada dasarnya Anda perlu mengganti semua karakter tab ganda (tab di samping satu sama lain hanya) dalam string dengan satu karakter tab dan hanya kemudian membaginya.

Versi terbaru dari @ userfuser jsfiddle hadir untuk memperbaiki masalah itu dengan memfilter data yang ditempelkan dengan 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');
    })
  })
})
Aram
sumber
Saya benar-benar menemukan bahwa ini hanya terjadi jika Anda menyalin dari spreadsheet perangkat lunak ONLYOFFICE. Hmm .. Meninggalkan ini di sini kalau-kalau ada yang tersandung di atasnya.
Aram
0

Excel 2007 memiliki fitur untuk melakukan ini di bawah tab "Data" yang berfungsi cukup baik.

LeWoody
sumber
0

Menggali ini, jika ada yang menemukannya di masa depan. Saya menggunakan kode di atas seperti yang dimaksudkan, tetapi kemudian mengalami masalah saat menampilkan tabel setelah dikirimkan ke database. Jauh lebih mudah setelah Anda menyimpan data untuk menggunakan PHP untuk mengganti baris dan tab baru dalam kueri Anda. Anda dapat melakukan penggantian saat pengiriman, $ _POST [request] akan menjadi nama textarea Anda:

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

Sekarang masukkan saja $ request ke database Anda, dan itu akan disimpan sebagai tabel HTML.

dcclassics.dll
sumber
-1

Mungkin akan lebih baik jika Anda membaca file excel Anda dari PHP, dan kemudian menyimpannya ke DB atau melakukan pemrosesan padanya.

di sini tutorial mendalam tentang cara membaca dan menulis data Excel dengan PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Adnan
sumber
Itu adalah solusi yang sangat buruk. Saya datang ke utas ini karena saya sedang melakukan ini dan utas ini sangat rentan terhadap kesalahan. Excel terkadang mengeluarkan angka sebagai bilangan bulat, terkadang mengapung terkadang sebagai string.
wobbily_col
skenario pengguna juga berlaku, di mana Anda perlu menempelkan dari sumber yang tidak dapat diandalkan, seperti bank Anda, yang file xls / csvnya penuh dengan omong kosong yang perlu disaring secara manual
ZJR