将大数据从excel列复制到HTML表单[关闭]答案

【问题标题】：Copy large data from excel column to HTML form [closed]将大数据从excel列复制到HTML表单[关闭]
【发布时间】：2021-11-01 17:28:36
【问题描述】：

我正在寻找可以从 Excel 复制列并直接粘贴到具有类似 Excel 的拖动选择功能的 HTML 表单的解决方案。目前，该应用程序功能齐全，我使用了文本输入，他们必须手动输入每个单元格的数据（我使用的是 PHP）。它有大约 100 个单元，数据存储在 MySQL 中。现在我被要求构建一个可以直接从 Excel 复制粘贴数据的功能。严格禁止上传 CSV

我正在寻找解决方案，并找到了一些关于handsontable的建议，但找不到任何解决方案如何使用handsontable数据放入MYSQL数据库。

任何建议或帮助将不胜感激。

【问题讨论】：

我会去上传 excel 并解析它，而无需用户复制粘贴。周围应该有一个完全能够处理这种情况的 PHPExcel 库

标签： javascript php html user-interface

【解决方案1】：

如果您想要一个花哨的解决方案，我认为最好的选择是使用 Handsontable，看看这部分文档，您可以使用事件“afterChange”来检查修改了什么并将其包含在数据库中。 (https://handsontable.com/docs/saving-data/#overview)。

如果您想要一个简单的解决方案，您可以使用 onpaste 事件来获取复制的值并将它们粘贴到输入元素上，如下所示：

const cells = document.querySelectorAll('.cell');

cells.forEach(cell => {
  cell.addEventListener('paste', handlePaste );
})

function handlePaste(event){
    event.preventDefault();
    const plainTextLines = event.clipboardData.getData('text');
    const lines = plainTextLines.split(/\r\n/g)
    const currentRowIndex = parseInt(event.target.getAttribute('data-row-index'), 10); 
    const total = cells.length;
    const pasteTotal = lines.length;
    
    for(let i = currentRowIndex; i < total; i++){
      const valueToPaste = lines[i - currentRowIndex];
      if(valueToPaste){
         cells[i].value = valueToPaste;
      }
    }
    document.querySelector('#result').innerHTML = plainTextLines;
  }

input{
  display:block;
  margin-bottom: 10px;
}

<input type="text" class="cell" data-row-index="0" >
<input type="text" class="cell" data-row-index="1" >
<input type="text" class="cell" data-row-index="2" >
<input type="text" class="cell" data-row-index="3" >
<input type="text" class="cell" data-row-index="4" >
<input type="text" class="cell" data-row-index="5" >
<div id="result"></div>

【讨论】：