excel内容粘贴至页面

最新推荐文章于 2024-01-31 09:23:01 发布

原创最新推荐文章于 2024-01-31 09:23:01 发布 · 646 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE js 专栏收录该内容

39 篇文章

订阅专栏

这个博客展示了如何在Vue应用中处理用户从Excel复制并粘贴到textarea或el-input的事件。通过监听'paste'事件，提取clipboardData中的文本，分割行和列，然后将数据存储到数组或数据模型中。对于间接粘贴，还展示了如何将数据映射到表格展示，并更新成本列表。

1、直接粘贴：

<!-- @format -->

<template>
  <div class="body">
    <textarea @paste="onPaste" style="height:200px;width:200px"></textarea>
  </div>
</template>

<script>
export default {
  name: 'Default',
  data() {
    return {
      costList: []
    };
  },
  methods: {
    onPaste(e) {
      console.log('on paste', e);
      let arr = [];
      let text = (e.clipboardData || window.clipboardData).getData('text');
      let arrtext = text.split('\n'); // 以转行符切割文本字符串
      arrtext.forEach((item, index) => {
        if (!item) {
          //snsArr.splice(index, 1); //去除空值
        } else {
          console.info('行:' + item);
          let cols = item.split('\t');
          console.info('列：' + cols[0] + '  ' + cols[1]);
          arr.push(item);
        }
      });
      console.log(arr);
    }
  }
};
</script>

选中excel单元格：

复制并在textarea中粘贴：

2、间接粘贴：

<!-- @format -->

<template>
  <div class="body">
    <el-input @paste.native="onPaste" placeholder="粘贴"></el-input>
    <table>
      <div v-for="(item,index) in costList" :key="index">
        <tr>
          <td>{{item.name}}</td>
           <td>{{item.age}}</td>
        </tr>
      </div>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Default',
  data() {
    return {
      costList: []
    };
  },
  methods: {
    onPaste(e) {
      console.log('on paste', e);
      let arr = [];
      let text = (e.clipboardData || window.clipboardData).getData('text');
      let arrtext = text.split('\n'); // 以转行符切割文本字符串
      arrtext.forEach((item, index) => {
        if (!item) {
          //snsArr.splice(index, 1); //去除空值
        } else {
          console.info('行:' + item);
          let cols = item.split('\t');
          console.info('列：' + cols[0] + '  ' + cols[1]);
          arr.push(item);
          let obj = { name: cols[0], age: cols[1] };
          this.costList.push(obj);
        }
      });
      console.log(arr);
    }
  }
};
</script>

<style lang="less" scoped>
</style>