将 Excel 数据粘贴到 html 表格中答案

【问题标题】：Paste Excel data into html table将 Excel 数据粘贴到 html 表格中
【发布时间】：2010-11-08 20:52:56
【问题描述】：

使用 Javascript，我如何创建一个 HTML 表格，该表格可以“接受”来自 excel（或 google 电子表格）的数字矩阵数据，通过电子表格中的“复制”，然后“粘贴”到浏览器中的表格中。

【问题讨论】：

这是一个非常相似的问题：stackoverflow.com/questions/686995/jquery-catch-paste-input
也类似：stackoverflow.com/questions/2006468/…

【解决方案1】：

虽然这个问题被认为已经回答（并且是一个老问题），但我想指出现在有更好的解决方案，请参阅jQuery Spreadsheet/Grid plugin with copy/paste from/to Excel。我特别喜欢the HandsOnTable 和was suggested by warpech（也是这个jQuery 插件的创建者）的极简主义。该插件仍然维护得很好。

【讨论】：

听起来像广告
在我发表此评论时，它并没有真正作为商业产品进行推广。不过，他们仍然提供开源社区版本。

【解决方案2】：

这是我创建的 javascript 代码（基于有用的答案）。我是 javascript 新手，所以我确信有更好的方法可以做到这一点，但它似乎有效......目标是将两列数字数据从电子表格“粘贴”到文本区域（我已经尝试过 excel 和 google 电子表格）并创建浮点向量“xf”和“yf”。希望对某人有用。欢迎批评...

它假设这些存在于 html 页面上......

<textarea id="psmtext" rows=24 cols=72> </textarea>

<input type="button" value="run code" onClick="psmtest();">


function psmtest(){

var psmtext = document.getElementById("psmtext");
  var st = psmtext.value;
  Ast = st.split("\n");
  var numrows = Ast.length; 

var ii;
  var xs = [];
  var ys = [];
  for (ii = 0 ; ii < numrows ; ii++) {
      // tab or comma deliminated data
      if ( Ast[ii].split(",",2)[1] != null ){ ys[ii] = Ast[ii].split(",")[1]; xs[ii] = Ast[ii].split(",")[0];}
      if ( Ast[ii].split("\t",2)[1] != null ){ ys[ii] = Ast[ii].split("\t")[1]; xs[ii] = Ast[ii].split("\t")[0];}
  }

var xss = [];
  var yss = [];
  var numgoodrows = 0;
  var iii =0;
  for (ii = 0 ; ii < numrows ; ii++) { 
      if ( xs[ii] != null && ys[ii] != null) {
          xss[iii] = xs[ii];
          yss[iii] = ys[ii];
          iii++;
      }
  }
  numgoodrows = iii;
  // next I need to convert to floating point array var xf = [], var yf = [];

var xf = [];
  var yf = [];
  for (ii = 0 ; ii < numgoodrows ; ii++) { 
    xf[ii] = parseFloat(xss[ii]);
    yf[ii] = parseFloat(yss[ii]);
  }

}

【讨论】：

【解决方案3】：

这只能在 IE 上可靠地工作，因为 Firefox（可能还有其他）不允许在没有明确允许的情况下访问剪贴板；较早的建议先粘贴到 textarea 可能比这更好。

当您从电子表格复制时，通常使用制表符 (chr9) 分隔单元格，使用 CR (chr13) 分隔行。此脚本将剪贴板转换为 2D 数组，然后从中构建表格。不太优雅，但它似乎可以从 Excel 中复制数据。

<html>
<head>
<script language="javascript">
function clip() {

    // get the clipboard text

    var clipText = window.clipboardData.getData('Text');

    // split into rows

    clipRows = clipText.split(String.fromCharCode(13));

    // split rows into columns

    for (i=0; i<clipRows.length; i++) {
        clipRows[i] = clipRows[i].split(String.fromCharCode(9));
    }


    // write out in a table

    newTable = document.createElement("table")
    newTable.border = 1;
    for (i=0; i<clipRows.length - 1; i++) {

        newRow = newTable.insertRow();

        for (j=0; j<clipRows[i].length; j++) {
            newCell = newRow.insertCell();
            if (clipRows[i][j].length == 0) {
                newCell.innerText = ' ';
            }
            else {
                newCell.innerText = clipRows[i][j];
            }
        }
    }

    document.body.appendChild(newTable);
}
</script>
</head>
<body>
<input type="button" onclick="clip()">
</body>
</html>

【讨论】：

我不得不使用txt.split("\n"); 而不是txt.split(String.fromCharCode(13));
我不得不使用 split("\n") for firefox 和 split(String.fromCharCode(13)) for Chrome
那么有人测试过拆分 13 和 10 吗？ (CR & LF)
如果其中一个单元格中包含\r\n，这不会中断吗？
为了让它在 windows 和 mac 上运行，我使用以下命令 - let rows = text.split(/\n|\r/).filter(row => row.length).map(row=> row.split(/\t/)) 过滤器消除了由 windows 中使用的 \n + \r 引起的空白行。

【解决方案4】：

要真正做好这件事会非常困难。

在我的脑海中，我想说最好的方法是给用户一个<textarea>，他们可以粘贴到。然后，在 onchange 事件处理程序中，使用一些 JS 解析来确定行和列的排列位置，创建 HTML 表并将其注入到 DOM 中。

这对于相对“方形”的数据集应该可以正常工作 - 您可能会在合并列/行和“锯齿状”数据时遇到更多问题

【讨论】：