从Excel复制/粘贴到网页

时间:2010-01-05 14:06:20

标签: javascript html forms excel

是否有标准方法或库可以从spreasheet复制并粘贴到Web表单? 当我从Excel中选择多个单元格时(显然)会丢失分隔符,并且所有单元格都粘贴到Web表单的一个单元格中。 是否必须在VB中完成?或者,一旦在Web表单上启动粘贴操作,就可以完成处理吗?

9 个答案:

答案 0 :(得分:76)

您不会丢失分隔符,单元格由制表符(\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);

因此,本质上,此脚本会根据粘贴的Excel数据创建HTML表格。

答案 1 :(得分:22)

为了回应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);
}

答案 2 :(得分: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>

答案 3 :(得分:7)

OSXWindows上,有多种类型的剪贴板可供不同类型的内容使用。在Excel中复制内容时,数据存储在纯文本和html剪贴板中。

正确的方法(不会因分隔符问题而被绊倒)是解析HTML。 http://jsbin.com/uwuvan/5是一个简单的演示,演示了如何获取HTML剪贴板。关键是绑定到onpaste事件并阅读

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

答案 4 :(得分:5)

对于像我这样在这里结束的任何未来的googlers,我使用了@tatu Ulmanen的概念,并将其变成了一个对象数组。这个简单的函数需要一串粘贴的excel(或Google表)数据(最好来自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;
}

希望将来帮助某人。

答案 5 :(得分:1)

更新:仅当您使用ONLYOFFICE而不是MS Excel时才会这样。

这里提供的所有答案中都有一个流程,也包含在已接受的答案中。流程是每当你在excel中有一个空单元格并复制它时,在剪贴板中你有2个标签字符彼此相邻,所以在拆分后你得到一个额外的项目在数组中,然后在该行中显示为一个额外的单元格并将所有其他单元格移动一个。因此,为了避免这种情况,你基本上需要用一个tab char替换所有双重标签(仅相邻的标签)字符串中的字符,然后才将其拆分。

@ userfuser的jsfiddle的更新版本可以通过使用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');
    })
  })
})

答案 6 :(得分:0)

Excel 2007具有在“数据”选项卡下执行此操作的功能,该功能非常适用。

答案 7 :(得分: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表格。

答案 8 :(得分:-1)

如果您从PHP读取excel文件,然后将其保存到数据库或对其进行一些处理,那可能会更好。

这里有一个关于如何用PHP读写Excel数据的内部教程:
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html