通常在写后台管理系统时我通常会使用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数据如下：

控制台输出的结果为：

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