在Vue中导入并读取Excel数据的操作步骤

 更新时间:2023年08月01日 09:34:45   作者:瓜皮伦  
在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据,所以本文就来给大家介绍一下Vue中导入并读取Excel数据的操作步骤,需要的朋友可以参考下

一、引入依赖

 npm install -S file-saver xlsx
 npm install -D script-loader
 npm install xlsx

二、在main.js中引入

import XLSX from 'xlsx'

三、创建vue文件

<div>
      <el-upload
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="limitUpload"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :auto-upload="false">
        <!-- 只 能 上 传 xlsx / xls 文 件 -->
      <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <!-- 数据展示 -->
        <el-main>
            <el-table :data="da">
              <el-table-column prop="code" label="编号">
              </el-table-column>
              <el-table-column prop="name" label="姓名">
              </el-table-column>
              <el-table-column prop="pro" label="省份">
              </el-table-column>
              <el-table-column prop="cit" label="城市">
              </el-table-column>
              <el-table-column prop="dis" label="区县">
              </el-table-column>
            </el-table>
          </el-main>
    </div>

四、核心方法

handleChange(file, fileList){
              this.fileTemp = file.raw;
              if(this.fileTemp){
                  if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
                      || (this.fileTemp.type == 'application/vnd.ms-excel')){
                      this.handleExcel(this.fileTemp);
                  } else {
                      this.$message({
                          type:'warning',
                          message:'文件格式错误,请删除后重新上传!'
                      })
                  }
              } else {
                  this.$message({
                      type:'warning',
                      message:'请上文件!'
                  })
              }
          },
          handleExcel(fileTemp) {
              let _this = this;
              this.file = fileTemp;
              var rABS = false; //是否将文件读取为二进制字符串
              var f = this.file;
              var reader = new FileReader();
              FileReader.prototype.readAsBinaryString = function(f) {
                  var binary = "";
                  var rABS = false; //是否将文件读取为二进制字符串
                  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就是你想要的东西
                      console.log('未处理的原始数据如下:');
                      console.log(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);
              }
          }

结果展示

到此这篇关于在Vue中导入并读取Excel数据的流程步骤的文章就介绍到这了,更多相关Vue导入并读取Excel数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue CLI3搭建的项目中路径相关问题的解决

    Vue CLI3搭建的项目中路径相关问题的解决

    这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何使用el-cascader组件写下拉级联多选及全选功能

    如何使用el-cascader组件写下拉级联多选及全选功能

    这篇文章主要介绍了如何使用el-cascader组件写下拉级联多选及全选功能,因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue使用localStorage存储数据的方法

    Vue使用localStorage存储数据的方法

    这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Element-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    这篇文章主要介绍了Element-UI中关于table表格的那些骚操作(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果

    VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果

    本文主要介绍了如何在Vue中使用vue-tree-color组件实现组织架构图,并详细介绍了如何实现数据的动态加载,在动态加载数据时,要确保数据更新是在Vue的响应式系统能捕获到的情况下进行的
    2024-10-10
  • el-upload http-request使用 多个文件上传携带其他参数方式

    el-upload http-request使用 多个文件上传携带其他参数方式

    这篇文章主要介绍了el-upload http-request使用 多个文件上传携带其他参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2首次加载屏幕闪烁问题

    vue2首次加载屏幕闪烁问题

    这篇文章详细介绍了Vue.js项目的基本结构和执行流程,包括index.html、main.js、App.vue和路由配置的关系,特别强调了在index.html中设置BASE_URL和cdn的使用,以及在main.js中使用render函数来减少打包体积
    2025-01-01
  • 在Vue中使用Immutable.js的步骤

    在Vue中使用Immutable.js的步骤

    这篇文章主要介绍了在Vue中使用Immutable.js的步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue router错误跳转到首页("/")的问题及解决

    Vue router错误跳转到首页("/")的问题及解决

    这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中$set用法详解

    vue中$set用法详解

    在vue中,并不是任何时候数据都是双向绑定的,解决数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名,这篇文章主要介绍了vue中$set用法详细讲解,需要的朋友可以参考下
    2022-12-12

最新评论