Vue+Element前端导入导出Excel
1 前言
1.1 业务场景
由前台导入Excel表格,获取批量数据。
根据一个数组导出Excel表格。
2 实现原理
2.1 引入工具库
file-saver、xlsx、script-loader
npm install -S file-saver xlsx
npm install -D script-loader
2.2 导入Excel
2.2.1 Element 上传控件
<el-uploadclass="upload-demo"action="":on-change="handleChange":on-exceed="handleExceed":on-remove="handleRemove":file-list="fileListUpload":limit="limitUpload"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel":auto-upload="false"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
</el-upload>
复制代码
limitUpload = 1
限制只能上传1个文件
accept
为默认打开的可上传的文件格式
handleChange(file, fileList){this.fileTemp = file.raw
},handleRemove(file,fileList){this.fileTemp = null
},
复制代码
fileTemp
这里定义了一下变量,指向最新上传的附件,起始定义为null。
这里发现控件file.raw
是我们要用的File
类型。
2.2.2 导入判断
if(this.fileTemp){if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){this.importfxx(this.fileTemp)} else {this.$message({type:'warning',message:'附件格式错误,请删除后重新上传!'})}
} else {this.$message({type:'warning',message:'请上传附件!'})
}
复制代码
2.2.3 导入函数
importfxx(obj) {let _this = this;// 通过DOM取文件数据this.file = objvar rABS = false; //是否将文件读取为二进制字符串var f = this.file;var reader = new FileReader();//if (!FileReader.prototype.readAsBinaryString) {FileReader.prototype.readAsBinaryString = function(f) {var binary = "";var rABS = false; //是否将文件读取为二进制字符串var pt = this;var wb; //读取完成的数据var outdata;var reader = new FileReader();reader.onload = function(e) {var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for(var i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}var XLSX = require('xlsx');if(rABS) {wb = XLSX.read(btoa(fixdata(binary)), { //手动转化type: 'base64'});} else {wb = XLSX.read(binary, {type: 'binary'});}outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西this.da = [...outdata]let arr = []this.da.map(v => {let obj = {}obj.code = v['设备ID']obj.type = v['设备型号']arr.push(obj)})return arr}reader.readAsArrayBuffer(f);}if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}
},
复制代码
arr
就是我们要的结果,是一个数组。每一个值是个对象,包含了code
type
两个属性。
excel中格式为横向 设备ID 和 设备型号。
2.3 导出Excel
2.3.1 引入JS文件
可参考下载地址:- github
将其中的2个JS文件放入到自己的工程中。
2.3.2 修改JS文件中地址
打开Export2Excel.js
,会出现如上图所示。由于本人将Blob.js
和Export2Excel.js
放到了同一级,这里引入是这样的。
这几个文件不支持import引入,所以需要script-loader
来将他们挂载到全局环境下。
2.3.3 导出函数
getExcel(res) {require.ensure([], () => {const { export_json_to_excel } = require('../../introduce/Export2Excel.js')const tHeader = ['姓名', '年龄']const filterVal = ['name', 'age']const list = resconst data = this.formatJson(filterVal, list)export_json_to_excel(tHeader, data, '导出列表名称')})
},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))
},
复制代码
这里的引用请根据自己的层级关系和文件夹命名require('../../introduce/Export2Excel.js')
res
为传入的数组,格式如:res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]
tHeader
为导出Excel表头名称,导出列表名称
即为导出Excel名称
下载的Excel位置根据浏览器设置的下载位置而定
3 后记
感谢支持。若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家 ?
欢迎关注 我的: 【Github】【掘金】【简书】【CSDN】【OSCHINA】【SF】
3.1 参考资料
- www.cnblogs.com/liguiwang..
- www.cnblogs.com/qiu...
Vue+Element前端导入导出Excel相关推荐
- Vue + Element 实现导入导出Excel
1.首先搭建Vue 项目(具体可参考以前文章,不再详述:https://blog.csdn.net/qq_42540989/article/details/89853923) 2.引入Element( ...
- Vue2.x + element ui 导入导出excel
实现内容: 导入excel文件最终将其展现在页面table中 将页面table中的表格转换为excel文件 仓库地址: 完整代码在这里:https://github.com/Nigo-yyy/vue- ...
- vue + element中el-table导出excel
第一步: 安装依赖: npm install --save xlsx file-saver 这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/ ...
- vue element前端 通讯录 导出服务
1.表格部分 < div class= "btns" > < el-button type= "primary" size= ...
- vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...
- vue导入导出excel组件封装
vue导入导出excel组件 可直接使用 参考以下博客,侵删 参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
- java excel data 导入数据_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
- java导入导出excel_Java导入导出Excel工具 easyexcel
Java导入导出Excel工具 easyexcel 做Java开发的同学,尤其是做管理后台的同学绝大多数都会接触到报表系统,这时候就少不了Excel的导入和导出了.Java解析生成Excel比较有名 ...
- ruoyi导入导出Excel
导入导出excel:使用若依自带的工具ExcelUtil:(例子:SysUserController) 导入之前需要生成一个excel模板给用户填写(前端通过接口获取模板名字,再调用下载接口commo ...
最新文章
- Numpy 广播机制(两个不同维度对象进行数学运算)
- 数据库实例: STOREBOOK 表空间 编辑 表空间: TEMP
- RHEL7 yum安装配置LAMP(Apache+PHP+MySql)服务器
- Java基础学习总结(59)——30 个java编程技巧
- Day26:configparser、subprocess模块
- Python网络编程、爬虫之requests模块使用
- Solr 5.3.0集成mmseg4j、tomcat部署、Solrj 5.3.0使用
- 我的世界1.12.2java下载_我的世界1.12.2电脑版下载
- 计算机cad知识,计算机与Cad制图知识点.doc
- mysql入侵服务器_记通过mysql数据库成功入侵到服务器内部的渗透实战
- 对于女生来说,软件测试和前端,学哪一个更好啊
- java同步关键字_线程同步关键字之 synchronized
- python ttk separator_python - ttk.Separator设置长度/宽度 - 堆栈内存溢出
- 【Node.js 微信公众号实战】4.Node.js 微信消息管理
- 腾讯云主机部署hexo博客
- 【个人作品】推荐一个SIP客户端-软电话,基于SIP协议,语言C++,界面QT4 开源,asterisk,tribox测试成功
- 关于使用讯搜(xunsearch)过程中遇到的坑
- class com.sun.mail.smtp.SMTPAddressFailedException: 550 5.1.1 recipient is not exist
- js获取当前日期所在的周一到周日的日期,以及星期几
- 微软虐我千百遍——记一次比较漫长的TFS数据库迁移