excel内容粘贴至页面

骑猪看日落 2022-10-07 01:55 186阅读 0赞

1、直接粘贴：

<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单元格：

![20210615162700715.png][]

复制并在textarea中粘贴：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

2、间接粘贴：

<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>

[20210615162700715.png]: /images/20221005/b27000b49d004f51afe13a09c084275d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20221005/ceebbd84926441efb18946319789efb0.png