Копирование / вставка из Excel на веб-страницу
есть ли стандартный способ или библиотека для копирования и вставки из spreasheet в веб-форму? Когда я выбираю более одной ячейки из Excel, я (очевидно) теряю разделитель, и все вставляется в одну ячейку веб-формы. Это нужно делать в VB? или обработка может быть выполнена после запуска действия вставки в веб-форме?
9 ответов
вы не теряете разделители, ячейки разделены вкладками (\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.
в ответ на ответ тату я создал быстрый 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);
}
та же идея, что и 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>
для любых будущих гуглеров, заканчивающих здесь, как я, я использовал концепцию @tatu Ulmanen и просто превратил ее в массив объектов. Эта простая функция принимает строку вставленных данных excel (или Google sheet) (предпочтительно из 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;
}
надеюсь, это поможет кому-то в будущем.
On OSX и Windows, существует несколько типов клипбордов для различных типов контента. При копировании содержимого в Excel данные хранятся в открытом тексте и буфере обмена html.
правильный способ (который не спотыкается о Проблемы с разделителями) - это проанализировать HTML. http://jsbin.com/uwuvan/5 это простая демонстрация, которая показывает, как получить буфер обмена HTML. Ключ должен привязаться к событию onpaste и прочитать
event.clipboardData.getData('text/html')
возможно, было бы лучше, если бы вы прочитали свой файл excel с PHP, а затем либо сохраните его в БД, либо выполните некоторую обработку.
здесь в отделе учебник о том, как читать и писать данные Excel с PHP:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html
выкапывая это, в случае, если кто-нибудь столкнется с ним в будущем. Я использовал приведенный выше код по назначению, но затем столкнулся с проблемой отображения таблицы после ее отправки в базу данных. Это намного проще, как только вы сохранили данные, чтобы использовать 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.
UPDATE: это верно, только если вы используете 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');
})
})
})