如何实现Excel列数据复制粘贴到类Excel HTML表单并存入MySQL

前端Handsontable配置（原生支持Excel粘贴+拖拽选择） #

Handsontable默认兼容Excel/WPS表格的整列/整区复制粘贴行为，同时自带拖拽选择、下拉填充等类Excel交互能力，完全匹配你的需求，无需额外开发交互逻辑：

<div id="excelTableContainer"></div>
<button id="submitData">保存数据</button>

<script>
// 初始化表格
const hotInstance = new Handsontable(document.getElementById('excelTableContainer'), {
  // 按你的业务需求调整行、列配置，此处示例为100行3列，可自行修改
  data: Array(100).fill('').map(() => Array(3).fill('')),
  rowHeaders: true,
  // 替换为你实际的业务字段名
  colHeaders: ['字段A', '字段B', '字段C'],
  // 非商业场景使用免费密钥，商用请自行购买对应授权
  licenseKey: 'non-commercial-and-evaluation',
  // 开启拖拽填充功能
  fillHandle: true,
  // 粘贴时直接覆盖选中区域，符合Excel使用习惯
  pasteMode: 'overwrite'
});

// 提交数据逻辑
document.getElementById('submitData').addEventListener('click', () => {
  // 获取表格全部数据，过滤全空行
  const formData = hotInstance.getData().filter(row => {
    return row.some(cell => cell !== null && cell !== '' && cell !== undefined);
  });
  if(formData.length === 0) {
    alert('请填写有效数据');
    return;
  }
  // 提交到后端接口
  fetch('/save_excel_data.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({data: formData})
  }).then(res => res.json()).then(result => {
    if(result.code === 0) {
      alert('数据保存成功，共保存' + result.count + '条');
    } else {
      alert('保存失败：' + result.msg);
    }
  })
})
</script>

后端PHP处理+MySQL存储逻辑 #

无需CSV上传，直接接收前端提交的结构化数据存入数据库即可：

<?php
// save_excel_data.php
header('Content-Type: application/json; charset=utf-8');

// 接收前端提交的JSON数据
$input = file_get_contents('php://input');
$params = json_decode($input, true);

if(empty($params['data'])) {
    echo json_encode(['code' => 1, 'msg' => '未检测到有效数据']);
    exit;
}
$dataList = $params['data'];

// 替换为你自己的数据库连接配置
$dbHost = '127.0.0.1';
$dbName = '你的数据库名';
$dbUser = '你的数据库用户名';
$dbPass = '你的数据库密码';

try {
    $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // 预处理SQL，替换为你实际的表名和字段名
    $stmt = $pdo->prepare("INSERT INTO 你的业务表 (字段a, 字段b, 字段c) VALUES (?, ?, ?)");
    
    foreach ($dataList as $row) {
        // 按列顺序对应绑定字段值
        $stmt->execute([
            $row[0] ?? '',
            $row[1] ?? '',
            $row[2] ?? ''
        ]);
    }
    
    echo json_encode([
        'code' => 0,
        'msg' => '保存成功',
        'count' => count($dataList)
    ]);
} catch (Exception $e) {
    echo json_encode([
        'code' => 2,
        'msg' => '数据库操作失败：' . $e->getMessage()
    ]);
}
?>

注意事项 #

• 如果需要过滤Excel粘贴带的特殊格式，可以添加Handsontable的beforePaste钩子，对粘贴内容做纯文本处理
• 可以在前端提交前增加数据格式校验，减少后端异常报错
• 100行数据量极小，批量插入无性能压力

内容的提问来源于stack exchange，提问作者ABS2019