vue+原生js实现从excel复制内容粘贴至table中展示

lit_finger

已于 2023-04-20 08:39:08 修改

阅读量5.6k

点赞数 8

分类专栏： vue 文章标签： javascript vue.js 前端

于 2021-11-12 17:05:26 首次发布

本文链接：https://blog.csdn.net/lit_finger/article/details/121290264

版权

本文介绍如何在Vue项目中，利用原生JavaScript处理从Excel复制的内容，并将其粘贴到表格中展示。关键在于监听paste事件，阻止默认行为，通过分隔符拆分字符串，并将数据绑定到表格的input框。文章提供了完整的Vue代码示例，包括针对Element UI的优化处理。

摘要由CSDN通过智能技术生成

我收到的需求是查询条件以表格的形式展示，同时要支持从excel粘贴

该文件为vue文件，基本静态部分如下

<template>
  <div>
    <table style="margin-bottom: 20px">
      <tr>
        <td>GlassId</td>
        <td>X坐标</td>
        <td>Y坐标</td>
      </tr>
      <tr v-for="(item, index) in searchList" :key="index">
        <td>
          <input type="text" title="glassId" v-model="item.glassId" />
        </td>
        <td>
          <input type="text" title="X坐标" v-model="item.x" />
        </td>
        <td>
          <input type="text" title="Y坐标" v-model="item.y" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
const searchList = [];
for (let i = 0; i < 10; i++) {
  searchList.push({ glassId: "", x: "", y: "" });
}

export default {
  data() {
    return {
      searchList
    };
  }
};
</script>

<style scoped>
table,
td {
  border: 1px solid #333;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
td > input {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 10px;
}
</style>

首先建立一个静态的table表格，每个td下都填满一个input框，方便v-model双向绑定数据（原本是用的div并给定可编辑的属性，后来发现和数据绑定比较麻烦，后决定用input）

该需求主要的技术点在于js里的粘贴事件 paste，代码如下

document.addEventListener("paste", e => {
    e.preventDefault(); //阻止默认粘贴事件
    e.stopPropagation(); //阻止事件冒泡

    let paste = (e.clipboardData || window.clipboardData).getData("text"); //以text方式接收粘贴内容
    ...
})

声明粘贴事件后，首先要阻止默认的粘贴事件，不让内容粘贴到表格中，然后接收粘贴出来的数据

以上为excel原数据和控制台打印的paste，每各单元格之间由 \t 间隔开，行与行之间由 \r\n 间隔开，由于控制台的缘故，字符串的这些未作显示。

然后对接收到的paste字符串做处理，先按行分隔成数组

document.addEventListener("paste", e => {
    e.preventDefault(); //阻止默认粘贴事件
    e.stopPropagation(); //阻止事件冒泡

    let paste = (e.clipboardData || window.clipboardData).getData("text"); //以text方式接收粘贴内容

    let arr &#