vue使用element的el-upload标签做Excel导入功能

刺骨的言语ヽ痛彻心扉 2023-06-15 11:06 7阅读 0赞

通常在写后台管理系统时我通常会使用Vue+Element，今天就来说一下在后台管理中如何实现Excel导入功能。

Excel导入功能基于Vue+Element+xlsx插件

1、首先安装xlsx插件：

npm install xlsx 或 cnpm install xlsx

2、在需要用到的页面中导入插件：

import XLSX from 'xlsx'

3、具体实现如下：

<template>
    	<div>
    		<el-upload ref="upload" action="/" :on-change="handleChange" :onexceed="handleExceed" :show-file-list="false"
    		 :auto-upload="false">
    			<el-button class="excel-btn">Excel导入</el-button>
    		</el-upload>
    	</div>
    </template>
    <script>
    	import XLSX from 'xlsx'
    	export default {
    		data() {
    			return {
    
    			}
    		},
    		methods: {
    			//上传文件时处理方法  
    			handleChange(file, fileList) {
    				// let file = file.files[0] // 使用传统的input方法需要加上这一步
    				let self = this;
    				const types = file.name.split(".")[1];
    				const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
    					item => item === types
    				);
    				this.fileTemp = file.raw;
    				if (this.fileTemp) {
    					if ((types == 'xlsx') || (types == 'xlc') || (types == 'xlm') || (types == 'xls') || (types == 'xlt') || (types ==
    							'xlw') || (types == 'csv')) {
    						this.importfxx(types);
    					} else {
    						this.$message({
    							type: 'warning',
    							message: '附件格式错误，请删除后重新上传！'
    						})
    					}
    				} else {
    					this.$message({
    						type: 'warning',
    						message: '请上传附件！'
    					})
    				}
    			},
    			//超出最大上传文件数量时的处理方法
    			handleExceed() {
    				this.$message({
    					type: 'warning',
    					message: '超出最大上传文件数量的限制！'
    				})
    				return;
    			},
    			importfxx(obj) {
    				let _this = this;
    				let inputDOM = this.$refs.inputer;
    				// 通过DOM取文件数据
    
    				this.file = event.currentTarget.files[0];
    
    				var rABS = false; //是否将文件读取为二进制字符串
    				var f = this.file;
    
    				var reader = new FileReader();
    				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]);
    						}
    						//如果没有在main.js中引入，则此处需要引入，用于解析excel
    						// 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]]);
    						console.log("excel读取到的数据：", outdata)
    						//outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
    						//此处可对数据进行处理
    						// let arr = [];
    						// outdata.map(v => {
    						//     let obj = {}
    						//     obj.code = v['Code']
    						//     obj.name = v['Name']
    						//     obj.pro = v['province']
    						//     obj.cit = v['city']
    						//     obj.dis = v['district']
    						//     arr.push(obj)
    						// });
    						// _this.da=arr;
    						// _this.dalen=arr.length;
    						// return arr;
    					};
    					reader.readAsArrayBuffer(f);
    				};
    				if (rABS) {
    					reader.readAsArrayBuffer(f);
    				} else {
    					reader.readAsBinaryString(f);
    				}
    			},
    		}
    	}
    </script>
    <style>
    	.excel-btn {
    		background: #16be44;
    		height: 40px;
    		border: none;
    		color: #FFFFFF;
    	}
    </style>

4、接着我们来试一下

Excel数据如下：

![20191122091750232.png][]

控制台输出的结果为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70][]

好了，看到输出的数据，完美。今天就到这里，我们下次见~

[20191122091750232.png]: https://img-blog.csdnimg.cn/20191122091750232.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122091837818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70