vue基于原生html标签导入excel表格及标签的美化

在做一个后台管理系统，使用的naive框架，因此以前用的基于element上传组件的导入excel就不能使用了，特别制作了这一版，做下记录，以后不管是使用什么框架，都可以直接使用。

首先安装插件

npm install --save xlsx file-saver

然后在页面引入

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

安装好后可以在package.json查看是否安装成功，以下代表安装成功

"file-saver": "^2.0.5",
"xlsx": "^0.18.5"

然后自定义html标签

 <label for="upload" class="top">导入表格</label><inputtype="file"multipleid="upload"style="display: none"@change="changeExcel($event)"accept=".xls,.xlsx"/>

美化标签样式

<style scoped lang="less">.top {height: 30px;width: 80px;background-color: #2080f0;font-size: 14px;line-height: 30px;cursor: pointer;display: inline-block;text-align: center;color: #fff;border-radius: 3px;margin-right: 20px;}.top:hover {background-color: #4098fc;}
</style>

效果：

最后是js部分点击函数逻辑

const tableData = ref([]); //表格数据const dealExcel = (ws) => {let keymap = {// 转换的开头姓名: 'name',工资月份: 'month',工资总金额: 'money',部门: 'section',职位: 'job',};ws.forEach((sourceObj) => {Object.keys(sourceObj).map((keys) => {let newKey = keymap[keys];if (newKey) {sourceObj[newKey] = sourceObj[keys];delete sourceObj[keys];}});});tableData.value = ws;};const changeExcel = (e) => {const files = e.target.files;if (files.length <= 0) {return false;} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {return false;}// 读取表格数据const fileReader = new FileReader();fileReader.onload = (ev) => {const workbook = XLSX.read(ev.target.result, {type: 'binary',});const wsname = workbook.SheetNames[0];const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);// dealExcel(ws);//转换数据格式console.log(ws);tableData.value = ws; //赋值console.log(tableData.value);};fileReader.readAsBinaryString(files[0]);};

dealexcel函数是对excel的表头进行转换，如果标头跟你的标头数据不相符的话。比如你的标头都是英文，而导入的标头是汉语。

我的数据格式是统一的，所以将调用函数注释了。

vue基于原生html标签导入excel表格及标签的美化相关推荐

vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出
目录基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出一.导入和导出二.导出数据为excel实现过程三.将excel中的数据导入到数据库中基于SpringB ...
php excel导入数据库显示乱码,php修改excel表格数据库数据格式-使用phpexcel导入excel表格数据到MYSQL，乱码怎么解决...
PHP 用PHPExcel往数据库导入大量数据估计0是null,所以不显示了,可以换个思路,让他显示为字符串 $number = 0; echo ''.$number 原生PHP代码实现excel导 ...
php修改excel表格数据,php修改excel表格数据-php怎么导入Excel表格到数据库，根据表格内的字段......
php怎么导入Excel表格到数据库,根据表格内的字段... 昨天项目里有个新知需求,客户希望把一些数据能导出成为Excel表格道,刚开始用PHP原生输入Excel表格,发现效果不是很理想,于是找到一 ...
导入Excel表格数据(一)
开发工具与关键技术:VS+导入Excel表格作者: 李伙撰写时间: 2019年6月3日在学习MVC过程中,如果我们需要录入某条数据时可以利用新增的方法把我们的数据录入进去,而录入的数据比较多的时 ...
pdf导入excel表格_如何将PDF插入Excel
pdf导入excel表格 Excel provides a plethora of features for organizing, manipulating, and handling your d ...
latex 的列表和表格环境-快速导入excel表格源文件
latex 的列表和表格环境-快速导出excel表格源文件列表-1 基本语法 \begin{itemize}\item 列表内容\item 列表内容\item 列表内容 \end{itemiz ...
php导入excel表格数据,php页面导入excel表格数据-php导入excel 怎么获取excel表格数据...
PHP如何导出当前页面中的表格至Excel 常用的用PHP读取EXCEL的方法有以下三种,各自有各自的优缺点.个人推荐用第三种方法,因为它可以跨平台使用. 1. 以.csv格式读取将.xls转换成. ...
matlab绘图 excel,『在matlab上如何导入excel表格然后画图』excle表格如何使用绘图笔...
excel怎样在绘制图形中加入文字 1.在excel表制图形中加入文以添加文字,首先绘制图形,图形绘制好图形,并选择"编辑文字",输入文字即可. 1.1插入图形, 1.2,选择所需 ...

vue基于原生html标签导入excel表格及标签的美化

vue基于原生html标签导入excel表格及标签的美化相关推荐

最新文章

热门文章