vue实现复制excel内容黏贴到网页,进而插入到el-table中

2023-10-13 00:50

本文主要是介绍vue实现复制excel内容黏贴到网页,进而插入到el-table中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先上一波效果图
在这里插入图片描述
以下是做这个功能的由来(觉得无聊的直接去看代码,捂脸)
老大让我做一个从excel复制选中的内容,然后在el-table里面黏贴,从而实现数据的批量导入到后台管理系统中,这样就不用一个一个输入了,我刚开始想,这怎么可能嘛,一个是excel表格,一个是代码,这
俩咋看也不沾边啊,然后老大给我说,这种功能是有的,你去网上随便一搜,很多教程的,那个clipboard插件好像就可以,然后我去搜了,发现不是那样,草(是一种植物),那个clipboard的复制,说到底也是给要复制的地方加个事件触发,然后复制,但是 你能在excel表格上面加点击事件吗??所以说,这个行不通,又百度了个说是使用jquery插件的,我觉得太麻烦了,而且也不一定行得通,最后说是用handsontable插件的,但是我装了后,发现没啥作用,就又去想了会,这他喵不就是复制黏贴吗,那我直接获取excel表格复制过来的内容,然后对获取到的内容进行处理一下,最后再插入到el-table里面不就行了,然后去百度到了一个事件 paste,对鼠标的复制黏贴事件进行监控,最后又借鉴了几个大佬的博客,也是对paste事件进行监听
mdn上面有对paste进行了介绍,还不错 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/paste_event
看了大佬的博客,我是豁然开朗啊,这是博客地址https://blog.csdn.net/zhaozhao236/article/details/115327739

没有使用什么插件啥的,就几行原生js代码就实现了

在这里插入图片描述

代码入下:

<template><div class="book"><el-input type="text" v-model="paster" @paste.native="pasteMe" /><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="age" label="年龄" width="80"> </el-table-column><el-table-column prop="sex" label="性别" width="80"> </el-table-column><el-table-column prop="education" label="学历" width="120"> </el-table-column></el-table></div>
</template>
<script>
export default {data() {return {paster: "",tableData: [{name: "赵老二",age: "28",sex: "男",education:"本科"},{name: "钱多多",age: "25",sex: "女",education: "研究生",},{name: "孙不客",age: "21",sex: "男",education: "教授",},{name: "李自成",age: "27",sex: "男",education: "院长",},],};},methods: {pasteMe(e) {let source = e.clipboardData.getData("Text");// console.log(source);// 首先对源头进行解析let rows = source.split("\n"); // 拆成很多行// console.log(rows);for (let i = 0; i < rows.length; i++) {// console.log(rows[i])if (rows[i] != "") {// 如果某一行不是空,再按列拆分let columns = rows[i].split("\t"); // 已经按列划分// console.log(columns);let dataone = {}; // 声明一行数组for (let j = 0; j < columns.length; j++) {// 读取tableData里的第j对应的key值let keys = Object.keys(this.tableData[j]); // key的名dataone[keys[j]] = columns[j];}// console.log(dataone);this.tableData.push(dataone);console.log(this.tableData);}}},},
};
</script>
<style>
.book {width: 50%;height: 400px;border: 1px solid red;margin: 0 auto;margin-top: 50px;overflow-y: scroll;
}
.el-input__inner {height: 100px !important;
}
</style>

ps: csdn(床上等你)上面传不了excel表格,所以看个截图吧
在这里插入图片描述
\t是制表符,\r是换行,\n是回车
在这里插入图片描述

这篇关于vue实现复制excel内容黏贴到网页,进而插入到el-table中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/199606

相关文章

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

在Golang中实现定时任务的几种高效方法

《在Golang中实现定时任务的几种高效方法》本文将详细介绍在Golang中实现定时任务的几种高效方法,包括time包中的Ticker和Timer、第三方库cron的使用,以及基于channel和go... 目录背景介绍目的和范围预期读者文档结构概述术语表核心概念与联系故事引入核心概念解释核心概念之间的关系