从Excel复制/粘贴到网页


88

是否有标准方法或库可以将电子表格复制并粘贴到Web表单?当我从Excel中选择多个单元格时(很明显),我失去了定界符,并且所有内容都粘贴到了Web表单的一个单元格中。它必须在VB中完成吗?还是可以在Web表单上开始粘贴操作后进行处理?


您是否正在尝试自动化?您能举个更好的例子吗?
Dayton Brown 2010年

2
我怕问这个问题。感谢您这样做,而且非常简洁。:)
Nostalg.io 2015年

Answers:


92

您不会丢失定界符,单元格由制表符(\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表。


9
我一直在处理类似的问题,值得注意的是,粘贴到文本框后,您会松散换行符。在粘贴到文本区域时,请保留它们。
wobbily_col 2014年

出于实际原因,您可以将此答案作为摘要以供将来使用。
AdrianoRR '16

1
如果单元格中有换行符,则会中断。
th3byrdm4n

对此的简短说明-效果很好,但是在复制数据时Excel会添加尾随行,因此您最终会留空td。仅供参考
jg2703

这是一个快速但短期的解决方案,如果我的一个单元格中包含\ n,该
怎么办

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基本上,它模拟了“粘贴后”事件。
userfuser

12

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

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

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

该jsbin无法达到我的预期(Win 7,Excel 2013上为Firefox 42)。自您发布此答案以来,有什么重要的变化,这使该方法不再有效吗?在浏览器控制台中,我看到记录的文本/纯内容,但是文本/ html内容为空。
Christian Semrau 2015年

这适用于chrome在excel上的Windows或在libreOffice上的ubuntu上。最佳解决方案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>

嗨,麦克风,这是很棒的代码!您对我如何将表格转换为可提交形式有任何见解?
BvilleBullet

这取决于您要提交的表格。我将用它制作一个字符串化的json,并将其作为单个字段发布到服务器。
麦克风

顺便说一下,这也适用于Word表(我们尝试转换的用户旧版“表单”之一)。谢谢。
休·希格雷夫斯

5

对于像我这样的未来任何Google员工,我都使用@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;
}

希望它对将来的人有所帮助。


1

更新:仅当您使用ONLYOFFICE而不是MS Excel时,这才是正确的。

实际上,这里提供的所有答案以及被接受的答案中都有一个流程。流程是,每当您在excel中有一个空单元格并将其复制时,在剪贴板中便会相邻有2个制表符,因此拆分后您会在数组中获得一个额外的项目,然后该项目在该行中显示为一个额外的单元格并将所有其他单元格移动一个。因此,为避免这种情况,您基本上需要用一个制表符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');
    })
  })
})

实际上,我发现只有从ONLYOFFICE软件的电子表格进行复制时,才会发生这种情况。嗯..把它留在这里,以防有人偶然发现它。
Aram

0

Excel 2007在“数据”选项卡下具有执行此功能的功能,效果很好。


0

如果将来有人遇到它,请仔细研究一下。我按预期使用了上面的代码,但是在将表提交到数据库后遇到了显示表的问题。一旦存储了数据以使用PHP替换查询中的新行和新标签,它就会容易得多。您可以在提交后执行替换,$ _ POST [request]将是您的文本区域的名称:

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

现在,只需将$ request插入数据库,它将存储为HTML表。


-1

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

这里是有关如何使用PHP读取和写入Excel数据的专题教程:http :
//www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html


那是绝对可怕的解决方案。我进入此线程的原因是我目前正在执行此操作,它极容易出错。Excel有时将数字吐出为整数,有时以浮点数吐出为字符串。
wobbily_col 2014年

用户场景也适用,您需要从不可靠的来源(例如您的银行)中粘贴信息,例如银行,其xls / csv文件中充满了垃圾,需要手动筛分
ZJR
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.