คัดลอก / วางจาก Excel ไปยังเว็บเพจ


89

มีวิธีมาตรฐานหรือไลบรารีในการคัดลอกและวางจาก spreasheet ไปยังเว็บฟอร์มหรือไม่? เมื่อฉันเลือกมากกว่าหนึ่งเซลล์จาก Excel ฉันจะสูญเสียตัวคั่นและทั้งหมดจะถูกวางลงในเซลล์เดียวของแบบฟอร์มเว็บ ต้องทำใน VB หรือไม่? หรือการประมวลผลสามารถทำได้เมื่อเริ่มการวางบนแบบฟอร์มบนเว็บแล้ว


คุณกำลังพยายามทำให้บางสิ่งเป็นอัตโนมัติหรือไม่? คุณสามารถยกตัวอย่างที่ดีกว่านี้ได้ไหม ...
Dayton Brown

2
ฉันกลัวที่จะถามคำถามนี้ ขอบคุณสำหรับการทำและกระชับ :)
Nostalg.io

คำตอบ:


94

คุณจะไม่สูญเสียตัวคั่นเซลล์จะถูกคั่นด้วยแท็บ ( \t) และแถวโดยขึ้นบรรทัดใหม่ ( \n) ซึ่งอาจมองไม่เห็นในแบบฟอร์ม ลองด้วยตัวเอง: คัดลอกเนื้อหาจาก Excel ไปยัง Notepad แล้วคุณจะเห็นเซลล์ของคุณเรียงกันอย่างสวยงาม เป็นเรื่องง่ายที่จะแบ่งเขตข้อมูลตามแท็บและแทนที่ด้วยอย่างอื่นด้วยวิธีนี้คุณสามารถสร้างตารางจากพวกเขาได้ นี่คือตัวอย่างการใช้ 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);

โดยพื้นฐานแล้วสคริปต์นี้จะสร้างตาราง HTML จากข้อมูล Excel ที่วาง


9
ฉันได้เล่นกับปัญหาที่คล้ายกันมันเป็นสิ่งที่น่าสังเกตเมื่อวางลงในกล่องข้อความคุณจะต้องขึ้นบรรทัดใหม่ ในขณะที่วางลงในพื้นที่ข้อความคุณต้องเก็บไว้
wobbily_col

ด้วยเหตุผลในทางปฏิบัติคุณสามารถทำให้คำตอบนี้เป็นตัวอย่างสำหรับการใช้งานในอนาคต
AdrianoRR

1
หากมีบรรทัดใหม่ภายในเซลล์สิ่งนี้จะแตก
th3byrdm4n

เพียงอย่างรวดเร็วทราบเกี่ยวกับเรื่องนี้ - ทำงานเก่ง แต่ Excel tdเพิ่มแถวต่อท้ายเมื่อข้อมูลที่จะถูกคัดลอกเพื่อให้คุณจบลงด้วยการที่ว่างเปล่า แค่ FYI
jg2703

นี่เป็นวิธีแก้ปัญหาที่รวดเร็ว แต่ระยะสั้นจะเกิดอะไรขึ้นถ้าเซลล์หนึ่งของฉันมี \ n อยู่ในนั้น
MeVimalkumar

27

เพื่อตอบสนองต่อคำตอบของ Tatu ฉันได้สร้าง jsFiddle อย่างรวดเร็วเพื่อแสดงโซลูชันของเขา

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

3
และนี่คือส่วนเพิ่มเติมของฉันสำหรับคำตอบนี้ แต่เมื่อแสดงตารางอัตโนมัติทันทีที่วางเหตุการณ์: jsfiddle.net/sTX7y/690โดยทั่วไปจะจำลองเหตุการณ์ 'afterpaste'
userfuser

12

บนOSXและWindowsมีคลิปบอร์ดหลายประเภทสำหรับเนื้อหาประเภทต่างๆ เมื่อคุณคัดลอกเนื้อหาใน Excel ข้อมูลจะถูกเก็บไว้ในข้อความธรรมดาและในคลิปบอร์ด html

วิธีที่ถูกต้อง (ที่ไม่สะดุดด้วยปัญหาตัวคั่น) คือการแยกวิเคราะห์ HTML http://jsbin.com/uwuvan/5เป็นตัวอย่างง่ายๆที่แสดงวิธีรับคลิปบอร์ด HTML กุญแจสำคัญคือการเชื่อมโยงกับเหตุการณ์ onpaste และอ่าน

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

jsbin ไม่ทำงานตามที่คาดไว้สำหรับฉัน (Firefox 42 บน Win 7, Excel 2013) มีการเปลี่ยนแปลงที่สำคัญหลังจากที่คุณโพสต์คำตอบนี้ซึ่งทำให้แนวทางนี้ใช้ไม่ได้อีกต่อไปหรือไม่? ในคอนโซลของเบราว์เซอร์ฉันเห็นข้อความ / เนื้อหาธรรมดาที่บันทึกไว้ แต่เนื้อหาข้อความ / html ว่างเปล่า
Christian Semrau

ใช้งานได้กับ chrome บน windows ที่มี excel หรือบน ubuntu ด้วย libreOffice ทางออกที่ดีที่สุด IMO เนื่องจากจะเก็บการจัดรูปแบบทั้งหมดจากแผ่นงานต้นฉบับ
BiAiB

คำตอบนี้ค่อนข้างตรงประเด็น แต่ต้องการรายละเอียดเพิ่มเติม
MeVimalkumar

8

ความคิดเดียวกับ Tatu (ขอบคุณฉันจะต้องการมันเร็ว ๆ นี้ในโครงการของเรา) แต่ด้วยการแสดงออกปกติ
ซึ่งอาจเร็วกว่าสำหรับชุดข้อมูลขนาดใหญ่

<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 นี่คือรหัสที่ยอดเยี่ยม! คุณมีข้อมูลเชิงลึกเกี่ยวกับวิธีที่ฉันจะนำการแปลงตารางนี้เป็นรูปแบบที่ส่งได้หรือไม่?
BvilleBullet

ขึ้นอยู่กับแบบฟอร์มที่คุณต้องการส่ง ฉันจะสร้าง json แบบสตริงจากนั้นและโพสต์เป็นฟิลด์เดียวไปยังเซิร์ฟเวอร์
ไมค์

อย่างไรก็ตามสิ่งนี้ใช้ได้กับตาราง Word เช่นกัน (หนึ่งใน "แบบฟอร์ม" เดิมของผู้ใช้ของฉันที่เรากำลังพยายามแปลง) ขอบคุณ.
Hugh Seagraves

5

สำหรับ Googler ในอนาคตที่ลงเอยที่นี่เช่นเดียวกับฉันฉันใช้แนวคิดของ @tatu Ulmanen และเปลี่ยนเป็นวัตถุต่างๆ ฟังก์ชันง่ายๆนี้ใช้สตริงของข้อมูล excel (หรือ Google ชีต) ที่วางไว้ (โดยเฉพาะจาก a textarea) และเปลี่ยนเป็นอาร์เรย์ของออบเจ็กต์ ใช้แถวแรกสำหรับชื่อคอลัมน์ / คุณสมบัติ

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

หวังว่ามันจะช่วยใครบางคนในอนาคต


1

อัปเดต: นี่จะเป็นจริงเฉพาะเมื่อคุณใช้ ONLYOFFICE แทน MS Excel

มีการไหลของคำตอบทั้งหมดที่ให้ไว้ที่นี่และในคำตอบที่ยอมรับด้วย โฟลว์คือเมื่อใดก็ตามที่คุณมีเซลล์ว่างใน excel และคัดลอกสิ่งนั้นในคลิปบอร์ดคุณจะมีตัวอักษร 2 แท็บติดกันดังนั้นหลังจากแยกคุณจะได้รับรายการเพิ่มเติมหนึ่งรายการในอาร์เรย์ซึ่งจะปรากฏเป็นเซลล์พิเศษในแถวนั้น และย้ายเซลล์อื่น ๆ ทั้งหมดทีละเซลล์ ดังนั้นเพื่อหลีกเลี่ยงไม่ให้คุณต้องแทนที่แท็บสองแท็บ (แท็บที่อยู่ติดกันเท่านั้น) ทั้งหมดในสตริงด้วยแท็บหนึ่งแท็บแล้วแยกออก

jsfiddle ของ @ userfuser เวอร์ชันอัปเดตอยู่ที่นี่เพื่อแก้ไขปัญหานั้นโดยการกรองข้อมูลที่วางด้วย 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');
    })
  })
})

ฉันพบว่าสิ่งนี้เกิดขึ้นก็ต่อเมื่อคุณคัดลอกจากสเปรดชีตของซอฟต์แวร์ ONLYOFFICE อืม .. ออกจากที่นี่เผื่อมีคนสะดุด
อร่าม


0

ขุดขึ้นมาเผื่อว่าจะมีใครเจอในอนาคต ฉันใช้รหัสข้างต้นตามที่ตั้งใจไว้ แต่ก็พบปัญหาในการแสดงตารางหลังจากที่ส่งไปยังฐานข้อมูลแล้ว ง่ายกว่ามากเมื่อคุณจัดเก็บข้อมูลเพื่อใช้ PHP เพื่อแทนที่บรรทัดและแท็บใหม่ในแบบสอบถามของคุณ คุณสามารถทำการแทนที่ได้เมื่อส่งแล้ว $ _POST [request] จะเป็นชื่อของ textarea ของคุณ:

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

ตอนนี้เพียงแค่ใส่ $ request ลงในฐานข้อมูลของคุณและจะถูกจัดเก็บเป็นตาราง HTML


-1

อาจจะดีกว่าถ้าคุณจะอ่านไฟล์ excel จาก PHP แล้วบันทึกลงใน DB หรือทำการประมวลผล

นี่คือบทช่วยสอนในขั้นตอนเกี่ยวกับวิธีการอ่านและเขียนข้อมูล Excel ด้วย PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html


นั่นเป็นทางออกที่แย่มาก ฉันมาที่หัวข้อนี้ในขณะที่ฉันกำลังทำสิ่งนี้และมีโอกาสเกิดข้อผิดพลาดอย่างไม่น่าเชื่อ บางครั้ง Excel จะพ่นตัวเลขออกมาเป็นจำนวนเต็มบางครั้งก็ลอยเป็นสตริง
wobbily_col

นอกจากนี้ยังใช้สถานการณ์ของผู้ใช้ซึ่งคุณต้องวางจากแหล่งที่ไม่น่าเชื่อถือเช่นธนาคารของคุณซึ่งไฟล์ xls / csv เต็มไปด้วยอึที่ต้องกรองด้วยตนเอง
ZJR
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.