vue项目导入excel文件并且读取文件的内容

我用的uniapp创建的vue2项目

搭配是vue2+xlsx

效果图

 

 

1.首先去下载 xlsx

cnpm i xlsx

2.导入使用 (这个在哪个文件上使用了就放在哪个文件里面)

import * as XLSX from "xlsx"

3.进行使用

随便使用一个按钮来触发事件就好了. 现在只能是h5端使用. 或别的端,改一下uni.chooseFile方法里面的内容就好了

	<el-button type="success" @click='choosefile'>选择文件</el-button>

//这个方法用来选择文件
choosefile() {
				let _this = this
				uni.chooseFile({
					count: 1,
					extension: ['.xls', '.xlsx'],
					success: res => {
						let reader = new FileReader();
						reader.onload = e => {
							const data = e.target.result

							_this.process(data) // data为binary数据
						};
						reader.readAsBinaryString(res.tempFiles[0]);
					}
				})
			},
			process(data) {
				const workbook = XLSX.read(data, {
					type: 'binary'
				}) // 二进制读取
				const wsname = workbook.SheetNames[0] // 取第一张表
				const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json
				console.log(ws)   //这里就是json数据了


			
			}