sheetJS+input——实现vue导入excel文件，并判断文件内容是否正确——基础积累
之前写了关于sheetJS导出excel表格的文章，今天来写一下导入功能。
先记录一下关于sheetJS的部分资料内容，方便后续查看。
1.关于sheetJs的部分资料
1.1 sheetJs官网
sheetJs官网地址：http://sheetjs.com
sheetJs的github地址：https://github.com/sheetjs/js-xlsx
1.2 其他大神关于sheetJS的技术文章
https://blog.csdn.net/marko_zheng/article/details/79454756
https://www.jianshu.com/p/74d405940305
2.关于excel的导入功能
需要先安装xlsx xlsx-style插件：
安装指定版本如下：
npm install xlsx@0.9.13 --save
npm install xlsx-style@0.8.13 --save
如果是以上版本，则引入方式如下：
import XLSX from "xlsx"
如果是安装最新版本：
npm install xlsx --save
npm install xlsx-style --save
则引入方式如下：
import * as XLSX from "xlsx"
之前我遇到的导入功能，都是通过input组件设置type='file'来处理。现在也是如此。
封装好的上传+解析组件链接https://download.csdn.net/download/yehaocheng520/87412794
封装好的上传+解析组件链接:https://download.csdn.net/download/yehaocheng520/87412794
2.1 通过input组件来实现文件的导入
html部分添加下面的代码：
<div style="opacity: 0"><input v-if="fileInput"ref="fileUpload"accept=".xls,.xlsx,.csv"style="width: 0px; height: 0px"type="file"v-on:change="addFile($event)" /></div>
js部分添加下面的代码：
data(){return{fileInput:false,}
},
methods:{//导入excel文件importEvent() {this.fileInput = true;this.$nextTick(() => {//页面渲染完成后，触发点击事件，弹出对话框this.$refs.fileUpload.click();});},addFile(file) {var files = file.target.files[0];//此时的files就是导入后的文件了，此时可以打印一下看下格式},
}
2.2 通过FileReader方法来处理导入后的文件
addFile(file) {var files = file.target.files[0];console.log(files);var fileReader = new FileReader();fileReader.onload = (ev) => {console.log('ev', ev);var data = new Uint8Array(ev.target.result);const workbook = XLSX2.read(data, {type: 'array'});console.log('workbook', workbook);const wsname = workbook.SheetNames[0]; //取第一张表const ws = XLSX2.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容console.log(ws);}fileReader.readAsArrayBuffer(files);
},
通过上面的代码，可以打印出来最后的ws字段
此时数据是一个数组，我们可以获取数组的第一项，也就是表头，可以根据表头的内容判断表格的内容是否正确。
下面介绍可以将上面的数据格式转化为数组的具体方法：
最终效果如下：
代码如下：
addFile(file) {var files = file.target.files[0];//虽然我的input支持多个上传，但是此时我还是只处理了第一个文件，多选的参数可以去掉了var name = files.name;var suffix = name.substring(name.length - 4);if (suffix == "xlsx" || suffix == ".xls" || suffix == ".csv") {this.fileConvertToWorkbook(files).then((workbook) => {var fileData = {};const sheet2JSONOpts = {defval: "",//raw:false,};workbook.SheetNames.forEach((item, index) => {var axlsxArr = XLSX2.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[index]],sheet2JSONOpts);if (axlsxArr.length == 0) {this.$message.error("导入得Excel中没有数据，请校验。");this.$refs.fileUpload.value = null;return;}fileData[item] = this.xlsxArrToTableArr(axlsxArr);});this.$refs.fileUpload.value = null;console.log('fileData', fileData);}).catch((err) => { });} else {this.$refs.fileUpload.value = null;this.$message.error("导入文件格式不对！");}
},
//将文档流转化为base64格式
fileConvertToWorkbook(file) {let reader = new FileReader();let fixdata = (data) => {let o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l) {o += String.fromCharCode.apply(null,new Uint8Array(data.slice(l * w, l * w + w)));}o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;};return new Promise((resolve, reject) => {try {reader.onload = (renderEvent) => {let data = renderEvent.target.result;let arr = fixdata(data);resolve(XLSX.read(btoa(arr), {type: "base64",cellDates: true,dateNF: "yyyy-MM-dd HH:MM:SS",}));};reader.onerror = (error) => {reject(error);};reader.readAsArrayBuffer(file);} catch (error) {reject(error);}});
},
xlsxArrToTableArr(xlsxArr) {let tableArr = [];let length = 0;let maxLength = 0;let maxLengthIndex = 1;xlsxArr.forEach((item, index) => {length = Object.keys(item).length;if (maxLength < length) {maxLength = length;maxLengthIndex = index;}});let tableHeaderKeys = Object.keys(xlsxArr[maxLengthIndex]);let tableHeader = [];tableHeaderKeys && tableHeaderKeys.forEach(head => {tableHeader.push(xlsxArr[maxLengthIndex][head]);})let rowItem = {};xlsxArr.shift();xlsxArr.forEach((item) => {rowItem = {};for (let i = 0; i < maxLength; i++) {rowItem[tableHeader[i]] = item[tableHeaderKeys[i]] || "";}tableArr.push(rowItem);});return {header: tableHeader,data: tableArr,};
},
特别需要注意的是，我这边的表格都是有一个合并的表头的，因此我在xlsxArrToTableArr函数中去掉了开头的一项，在进行获取表格的数据，否则会把表头也加入到表格数据中。
如果开头没有合并的表头，或者有合并行的表头，则需要单独处理了。
完成！！！
sheetJS+input——实现vue导入excel文件，并判断文件内容是否正确——基础积累相关推荐
- js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览 导入XLSX库 官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
- Java 使用poi导入excel，结合xml文件进行数据验证的例子(增加了jar包)
ava 使用poi导入excel,结合xml文件进行数据验证的例子(增加了jar包) 假设现在要做一个通用的导入方法: 要求: 1.xml的只定义数据库表中的column字段,字段类型,是否非空等条件 ...
- js根据文件后缀判断文件类型
有时候需要前端根据文件后缀判断文件类型 下面是代码,不足之处还望补充~ /*** @description: 根据后缀判断文件类型* @param {String} fileName 文件名称* @r ...
- java语言怎样判断文件夹_JAVA语言之如何判断文件，判断文件夹是否存在的代码...
本文主要向大家介绍了JAVA语言之如何判断文件,判断文件夹是否存在的代码,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 一.判断文件是否存在,不存在则创建File file = ne ...
- excel怎么快速判断录入银行卡号是否正确？
今天跟大家分享一下excel怎么快速判断录入银行卡号是否正确? 1.首先打开Excel软件,选中银行卡号所在单元格 2.接着我们点击[DIY工具箱] 3.点击[银行卡],选择[判断正确] 4.点击 ...
- vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据.找了网上的资料后发现js-xlsx可以实现. 首先安装依赖: $ npm install xlsx HTML部分: 引入: im ...
- vue导入excel进度条_Vue结合后台导入导出Excel问题详解
最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件 ...
- vue导入excel进度条_纯前端 vue+ js-xlsx 导入excel表格
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-e ...
- php files得不到导入的文件,PHP判断文件是否被引入的方法get_included_files用法示例...
本文实例讲述了PHP判断文件是否被引入的方法get_included_files用法.分享给大家供大家参考,具体如下: // 本文件是 abc.php include 'test1.php'; inc ...
最新文章
- linux系统内核流转浅析
- python turtle渐变色_如何在matplotlib中绘制渐变色线？
- springboot 创建地址_这可能是史上最易懂的 Spring Boot 入门教程
- linux 内核宏container_of剖析
- （DFS）棋盘问题（poj1321）
- Spark SQL 1.3.0 DataFrame介绍、使用及提供了些完整的数据写入
- OpenSubdiv：大规模并行CPU和GPU架构上实现高性能细分表面
- 分布式多级缓存中间件引导实践
- 【转】使用oschina的git服务器
- fiddler手机抓包 443
- mysql经典46_mysql练习46题 PDF 下载
- php字游戏源码,php文字游戏寻仙纪.zip
- 2021年最完整的html网页跳转代码大全
- robo3t怎么插入数据_robo 3T（robomongo）在ubuntu16.04上安装记录
- anaconda版本选择_Anaconda简介
- 算法：5、绝对差值和
- 健身教练教你跑步减肥的正确方法
- 星际蜗牛8盘位装机记录 蜗牛C双全 益衡7030电源
- iphone手机尺寸汇总
- 推荐一款MD5解密在线网站
热门文章
- 计算机二级怎么样分屏方便,全国计算机等级考试二级教程
- springCloud项目不能向EurekaServer 注册多个EurekaClient时(端口不一致)方法及踩坑经历
- 迷宫问题----经典回溯法解决
- 戴尔硬件服务器,服务器硬件、结构介绍_Intel Xeon E5-2660 v4_服务器x86服务器-中关村在线...
- 异性相处，关系再好，也要懂得这些“分寸”
- uniapp：索引列表
- GitHub分支使用详解
- 1条命令解决不能完成此操作，因为项目“Karabiner-Elements”已被锁定
- qq邮箱发送邮件到163邮箱
- 路由器专用计算机,AUX端口常是通过专用连线与计算机连接，用来对路由器进行基本配置.._简答题试题答案...