解析用户粘贴的excel内容，papaparse.js库

今天接到新的需求，用户在excel文件中复制内容，到网页上按下ctrt+v就把内容粘贴到表格中去。

数据如图：

表格如图：

在网上找到了papaparse库就直接上手撸了。

papaparse仓库地址gitee

papaparse官方文档地址

按照文档说明 直接npm install papaparse 然后import使用即可

目前使用vue2核心代码如下

  methods:{
      handerPaste(event){
         const clipboardData = event.clipboardData || window.clipboardData;
          const pastedText = clipboardData.getData('text');
          const res = Papa.parse(pastedText,{delimiter:"\t",linebreak:"\r\n"});
          if (res.errors.length) {
            this.$message.error("粘贴的数据不符合规范，解析错误。");
            return
          }
          // 数据不是对象数组格式再解析一下
          res.data.forEach(row => {
            let crudRow = {
              date: row[0],
              value: row[1],
            };
            // todo：插入表格数组即可
          })
          this.$message.success("粘贴数据到表格成功。");
      }
  },
  mounted() {
    // 监听用户粘贴,点击表格之后按ctrt+v才有用，否则监听document容易拿到废数据。、
    this.$refs.dataCrud.$el.addEventListener('paste',this.handerPaste);
  },
  beforeDestroy() {
     // 销毁的时候不再监听。
    this.$refs.dataCrud.$el.removeEventListener("paste",this.handerPaste);
  },

总的来说 papaparse库使用还是比较简单文档也齐全。

至此又学会一个库。