vue读取Excel文件内容

最新推荐文章于 2024-06-12 14:55:01 发布

hacllker

最新推荐文章于 2024-06-12 14:55:01 发布

阅读量1.9k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44745401/article/details/126624958

版权

安装xlsx

npm install xlsx --save

如果版本不兼容，先卸载xlsx

npm uninstall xlsx

然后安装更低版本的

npm install xlsx@0.17.0 --save
npm install xlsx@0.16.0 --save

导入xlsx

import XLSX from 'xlsx';

上传文件

引用element-ui中的upload

<el-upload class="upload-demo" 
	action :limit="1"
	:http-request="getExcel"
	>
     <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

解析Excel

//解析excel   
analysis(file) {
 return new Promise(function (resolve, reject) {
   const reader = new FileReader();
   reader.onload = function (e) {
     const data = e.target.result;
     let datajson = XLSX.read(data, {
       type: "binary"
     });
     const result = [];
     datajson.SheetNames.forEach(sheetName => {
       result.push({
         sheetName: sheetName,
         sheet: XLSX.utils.sheet_to_json(datajson.Sheets[sheetName])
       });
     });
     resolve(result);
   };
   reader.readAsBinaryString(file.file);
 });
},

导入文件

// 导入文件
getExcel(file) {
 const types = file.file.name.split(".")[1]; //获取文件后缀
 const fileType = ["xlsx","xls"].some(
   item => item === types
 );
 if (!fileType) {
   this.$message("格式错误！请重新选择");
   return;
 }
 this.analysis(file).then(tableJson => {
   if (tableJson && tableJson.length > 0) {
     //成功解析出数据
     let dataExcel = tableJson[0];
     console.log("数据",dataExcel);
     console.log(JSON.stringify(dataExcel.sheet));
   }
 });
},