Скопіюйте / вставте з Excel на веб-сторінку

Question 1

Чи існує стандартний спосіб або бібліотека для копіювання та вставки з електронної таблиці у веб-форму? Коли я вибираю більше однієї комірки з Excel, я (очевидно) втрачаю роздільник і все вставляється в одну комірку веб-форми. Це потрібно робити у VB? або обробку можна було здійснити, коли в веб-формі розпочато дію вставки?

Question 2

Ви не втрачаєте роздільники, комірки відокремлюються вкладками ( \t), а рядки - рядками ( \n), які можуть не відображатися у формі. Спробуйте самі: скопіюйте вміст з Excel у Блокнот, і ви побачите, як ваші клітинки будуть добре вибудовані. Тоді легко розділити поля за вкладками і замінити їх чимось іншим, таким чином ви можете створити з них навіть таблицю. Ось приклад використання 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.

Question 3

У відповідь на відповідь Тату я створив швидкий 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);
}

Question 4

В OSX та Windows існує кілька типів буферів обміну для різних типів вмісту. Під час копіювання вмісту в Excel дані зберігаються у відкритому тексті та в буфері обміну HTML.

Правильний спосіб (який не збігається через проблеми з роздільниками) - це синтаксичний аналіз HTML. http://jsbin.com/uwuvan/5 - це проста демонстрація, яка показує, як отримати HTML-буфер обміну. Головне - прив’язати до події onpaste і прочитати

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

Question 5

Та сама ідея, що і Тату (дякую, незабаром вона знадобиться в нашому проекті), але з регулярним виразом.
Що може бути швидшим для великих наборів даних.

<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

Для будь-яких майбутніх гуглерів, які опиняються тут, як я, я використовував концепцію @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;
}

Сподіваємось, це допоможе комусь у майбутньому.

Question 7

ОНОВЛЕННЯ: Це справедливо, лише якщо ви використовуєте 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');
    })
  })
})

Question 8

Excel 2007 має функцію для цього на вкладці "Дані", яка працює досить добре.

Question 9

Викопуючи це, на випадок, якщо хтось зіткнеться з ним у майбутньому. Я використав вищезазначений код за призначенням, але потім зіткнувся з проблемою відображення таблиці після того, як її було надіслано до бази даних. Після збереження даних набагато простіше використовувати PHP для заміни нових рядків та вкладок у вашому запиті. Ви можете виконати заміну під час надсилання, $ _POST [запит] буде назвою вашої області тексту:

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

Тепер просто вставте $ request у свою базу даних, і вона буде збережена як таблиця HTML.

Question 10

Можливо, було б краще, якби ви прочитали ваш файл Excel з PHP, а потім або зберегли його в БД, або виконали якусь обробку на ньому.

ось посібник із читання та запису даних Excel за допомогою PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html