从Excel复制/粘贴到网页

His*_*ess 81 html javascript forms excel

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

Tat*_*nen 83

您不会丢失分隔符,单元格由tabs(\t)分隔,行由newlines(\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);
Run Code Online (Sandbox Code Playgroud)

因此,本质上,此脚本从粘贴的Excel数据创建HTML表.

  • 我一直在玩类似的问题,值得注意的是,粘贴到文本框,你松开了换行符.粘贴到文本区域时,请保留它们. (7认同)
  • 喜欢它,谢谢! (2认同)
  • 如果单元格内有换行符,则会中断。 (2认同)
  • 这是一个快速但短期的解决方案,如果我的一个单元格中包含 \n 该怎么办 (2认同)

dun*_*ood 23

为了回应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>
Run Code Online (Sandbox Code Playgroud)

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);
}
Run Code Online (Sandbox Code Playgroud)

  • 这是我对这个答案的补充,但是会在粘贴事件后立即显示自动表格:http://jsfiddle.net/sTX7y/690/基本上,它模拟了“粘贴后”事件。 (2认同)

Mic*_*Mic 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>
Run Code Online (Sandbox Code Playgroud)


She*_*tJS 8

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

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

event.clipboardData.getData('text/html')
Run Code Online (Sandbox Code Playgroud)


Coo*_*Coo 5

对于像我这样在这里结束的任何未来的谷歌,我使用了@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;
}
Run Code Online (Sandbox Code Playgroud)

希望它能帮助将来的某个人.