vue实现复制excel内容黏贴到网页,进而插入到el-table中
先上一波效果图以下是做这个功能的由来(觉得无聊的直接去看代码,捂脸)老大让我做一个从excel复制选中的内容,然后在el-table里面黏贴,从而实现数据的批量导入到后台管理系统中,这样就不用一个一个输入了,我刚开始想,这怎么可能嘛,一个是excel表格,一个是代码,这俩咋看也不沾边啊,然后老大给我说,这种功能是有的,你去网上随便一搜,很多教程的,那个clipboard插件好像就可以,然后我去搜了
先上一波效果图
以下是做这个功能的由来(觉得无聊的直接去看代码,捂脸)
老大让我做一个从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是回车
更多推荐
所有评论(0)