Vue中导入并读取Excel数据

这篇具有很好参考价值的文章主要介绍了Vue中导入并读取Excel数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在工作中遇到需要前端上传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.js,excel,前端
Vue中导入并读取Excel数据,vue.js,excel,前端文章来源地址https://www.toymoban.com/news/detail-620464.html

到了这里,关于Vue中导入并读取Excel数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue纯前端导入excel,获取excel的表格数据渲染el-table

    最近有个需求,最开始列表数据是通过新增按钮一条条添加的,但是部分数据量可能上百条,客户自己手选会很慢,所以产品经理给了个需求要求可以通过上传excle文件进行导入。 经过网上查询及涉及自己项目,实现了此功能。 第一步:安装插件,我安的是0.16.0;原因是默认

    2024年02月16日
    浏览(54)
  • 前端excel文件处理,vue2 、file-saver、xlsx, excel文件生成与excel文件链接数据导出

    安装插件 如使用TS开发,可安装file-saver的TypeScript类型定义 下载文件流 本地文件下载 文件下载(列宽自适应) 表格显示,每列列宽自适应 xlsx文件链接数据导出 方法调用

    2024年02月11日
    浏览(59)
  • 前端使用 xlsx.js 工具读取 excel 遇到时间日期少 43 秒的解决办法

    在使用 xlsx 读取 excel 的时间格式的数据时,如 ‘2023-11-30’,‘2023/11/30’ ,默认会读取一串数字字符串,如:‘45260’,此时需要在 read 的时候传入一个配置项: 此时拿到的是标准的时间格式 :‘Wed Nov 29 2023 23:59:17 GMT+0800(中国标准时间)’ ,这个时间格式是带时区的,有没

    2024年02月04日
    浏览(49)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(66)
  • VUE: 将Json (后台返回的数据-list) 数据转换为Excel文件并实现前端下载

    1. 下载xlsx的包 2. vue中的写法 创建button的按钮,添加点击的函数 写函数 函数流程总体来说就是: 将json字符串书写写入文件,然后转换为blob的对象,之后通过文件流的方式传递给用户下载 其中的 jsonData 可以通过 axios 请求后端传递来的数据。

    2024年02月11日
    浏览(56)
  • vue实现excel文件的导入和读取

    上传数据前  上传数据后 或者   如果一直报关于xlsx的read的错误,这里是因为xlsx的0.18.0版本已经没有read属性了,所以最好是使用0.18.0版本以下的xlsx。 excel.js utils.js 实现加载

    2024年02月14日
    浏览(38)
  • vue中使用xlsx读取excel文件

    在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖 这里使用的h5原生文件上传项 其中 multiple 属性允许上传多个文件 其中,可以发现fileList是一个类数组,由传入的file对象组成。每个file对象包含一下属性: 属性 属性值 描述 lastModified Number 表示最近一次的修改时间

    2024年02月02日
    浏览(48)
  • 后端:使用easyExcel实现解析Excel文件读取数据。前端:Excel模板下载、前端上传文件

            本篇是EasyExcel快速入门知识,讲解如何读取Excel文件,对Excel中错误信息如空字符、必填项为空、表格格式校验做到处理 ,并给出了实际项目中示例代码;为什么要使用easyexcel;原因是相比于poi,easyexcel更加轻量级,读取写入API方便,并且在工作中占用内存较小;

    2024年02月05日
    浏览(76)
  • 前端使用xlsx插件读取excel文件数据

    使用 xlsx 插件在前端读取Excel文件数据具有以下优点和缺点,适用于以下场景: 简单易用: xlsx 插件提供了简单的API来读取Excel文件数据,无需复杂的配置和依赖。 完整的功能: xlsx 插件支持读取各种Excel文件格式,包括XLS和XLSX等常见格式,可以读取多个工作表和多种数据类

    2024年02月14日
    浏览(62)
  • vue + js 实现导出excel

    下面是具体的步骤: **注意:**安装的时候注意版本号

    2024年02月12日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包