Копировать / вставить из 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

Answer 1

88

Есть ли стандартный способ или библиотека для копирования и вставки из электронной таблицы в веб-форму? Когда я выбираю более одной ячейки в Excel, я (очевидно) теряю разделитель, и все вставляется в одну ячейку веб-формы. Это нужно делать на VB? или можно ли выполнить обработку после запуска действия вставки в веб-форме?

javascript html forms excel Его дерзость
источник

Вы пытаетесь что-то автоматизировать? Можете ли вы привести лучший пример ...

Дейтон Браун

2

Я боялся задать этот вопрос. Спасибо за это и за такую лаконичность. :)

Nostalg.io

Answer 2

Вы пытаетесь что-то автоматизировать? Можете ли вы привести лучший пример ...

Дейтон Браун

Answer 3

2

Я боялся задать этот вопрос. Спасибо за это и за такую лаконичность. :)

Nostalg.io

Answer 4

93

Вы не потеряете разделители, ячейки разделяются табуляцией ( \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.

Тату Улманен
источник

9

Я играл с аналогичной проблемой, стоит отметить, что при вставке в текстовое поле вы теряете новые строки. При вставке в текстовую область вы их сохраняете.

wobbily_col 04

Из практических соображений вы можете сделать этот ответ фрагментом для использования в будущем.

AdrianoRR

1

Если в ячейке есть новая строка, это прерывается.

th3byrdm4n

Просто небольшое примечание по этому поводу - работает блестяще, но Excel добавляет завершающую строку при копировании данных, так что вы получаете пустую строку td. Just FYI

jg2703

это быстрое, но краткосрочное решение, что, если в одной из моих ячеек содержится \ n

MeVimalkumar

Answer 5

9

Я играл с аналогичной проблемой, стоит отметить, что при вставке в текстовое поле вы теряете новые строки. При вставке в текстовую область вы их сохраняете.

wobbily_col 04

Answer 6

Из практических соображений вы можете сделать этот ответ фрагментом для использования в будущем.

AdrianoRR

Answer 7

1

Если в ячейке есть новая строка, это прерывается.

th3byrdm4n

Answer 8

Просто небольшое примечание по этому поводу - работает блестяще, но Excel добавляет завершающую строку при копировании данных, так что вы получаете пустую строку td. Just FYI

jg2703

Answer 9

это быстрое, но краткосрочное решение, что, если в одной из моих ячеек содержится \ n

MeVimalkumar

Answer 10

В ответ на ответ Тату я быстро создал 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);
}

Answer 11

3

И вот мое дополнение к этому ответу, но с автоматической таблицей, показывающей сразу при событии вставки: jsfiddle.net/sTX7y/690 По сути, он имитирует событие «afterpaste».

userfuser

Answer 12

12

В OSX и Windows существует несколько типов буферов обмена для разных типов контента. Когда вы копируете содержимое в Excel, данные сохраняются в виде обычного текста и в буфере обмена HTML.

Правильный способ (который не связан с проблемами с разделителями) - это проанализировать HTML. http://jsbin.com/uwuvan/5 - это простая демонстрация, показывающая, как получить буфер обмена HTML. Ключ - привязать к событию onpaste и прочитать

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

SheetJS
источник

У меня jsbin не работал должным образом (Firefox 42 на Win 7, Excel 2013). Изменилось ли что-то важное с тех пор, как вы опубликовали этот ответ, из-за чего этот подход больше не работает? В консоли браузера я вижу записанное текстовое / обычное содержимое, но содержимое text / html пустое.

Кристиан Семрау

Это работает с хромом либо в окнах с excel, либо в ubuntu с libreOffice. Лучшее решение IMO, поскольку оно сохраняет все форматирование исходных листов.

BiAiB

этот вполне уместный ответ, но требует более подробной информации

MeVimalkumar

Answer 13

У меня jsbin не работал должным образом (Firefox 42 на Win 7, Excel 2013). Изменилось ли что-то важное с тех пор, как вы опубликовали этот ответ, из-за чего этот подход больше не работает? В консоли браузера я вижу записанное текстовое / обычное содержимое, но содержимое text / html пустое.

Кристиан Семрау

Answer 14

Это работает с хромом либо в окнах с excel, либо в ubuntu с libreOffice. Лучшее решение IMO, поскольку оно сохраняет все форматирование исходных листов.

BiAiB

Answer 15

этот вполне уместный ответ, но требует более подробной информации

MeVimalkumar

Answer 16

8

Та же идея, что и у Тату (спасибо, скоро в нашем проекте она понадобится), но с регулярным выражением.
Что может быть быстрее для большого набора данных.

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

Микрофон
источник

Привет, Мик, это отличный код! Есть ли у вас какое-нибудь представление о том, как я могу преобразовать эту таблицу в форму для отправки?

BvilleBullet

это зависит от формы, которую вы хотите отправить. Я бы сделал из этого строковый json и отправил его как одно поле на сервер.

Mic

Кстати, это работает и для таблицы Word (одна из устаревших «форм» моих пользователей, которую мы пытаемся преобразовать). Спасибо.

Хью Сигрейвс

Answer 17

Привет, Мик, это отличный код! Есть ли у вас какое-нибудь представление о том, как я могу преобразовать эту таблицу в форму для отправки?

BvilleBullet

Answer 18

это зависит от формы, которую вы хотите отправить. Я бы сделал из этого строковый json и отправил его как одно поле на сервер.

Mic

Answer 19

Кстати, это работает и для таблицы Word (одна из устаревших «форм» моих пользователей, которую мы пытаемся преобразовать). Спасибо.

Хью Сигрейвс

Answer 20

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

Надеюсь, это поможет кому-то в будущем.

Answer 21

ОБНОВЛЕНИЕ: это верно, только если вы используете 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');
    })
  })
})

Answer 22

На самом деле я обнаружил, что это происходит только при копировании из электронной таблицы программного обеспечения ONLYOFFICE. Хм .. Оставить это здесь на случай, если кто-нибудь наткнется на это.

Арам

Answer 23

0

В Excel 2007 есть функция для этого на вкладке «Данные», которая работает довольно хорошо.

LeWoody
источник

Answer 24

Копаем это на случай, если кто-нибудь столкнется с этим в будущем. Я использовал приведенный выше код по назначению, но затем столкнулся с проблемой отображения таблицы после того, как она была отправлена в базу данных. После того, как вы сохранили данные, гораздо проще использовать 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.

Answer 25

-1

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

вот подробное руководство о том, как читать и записывать данные Excel с помощью PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

Аднан
источник

Это абсолютно ужасное решение. Я зашел в эту ветку, так как сейчас делаю это, и это невероятно подвержено ошибкам. Excel иногда выводит числа как целые, иногда как числа с плавающей запятой, иногда как строки.

wobbily_col

также применяются пользовательские сценарии, когда вам нужно вставить из ненадежных источников, таких как ваш банк, чьи файлы xls / csv полны дерьма, которое нужно просеивать вручную

ZJR

Answer 26

Это абсолютно ужасное решение. Я зашел в эту ветку, так как сейчас делаю это, и это невероятно подвержено ошибкам. Excel иногда выводит числа как целые, иногда как числа с плавающей запятой, иногда как строки.

wobbily_col

Answer 27

также применяются пользовательские сценарии, когда вам нужно вставить из ненадежных источников, таких как ваш банк, чьи файлы xls / csv полны дерьма, которое нужно просеивать вручную

ZJR

Копировать / вставить из Excel на веб-страницу

Ответы: