VUE中导入excel文件

GeekGhc 发布于2019-08-23 18:04 / 1071人阅读

摘要：实现的效果如下图参考文献网址安装依赖引入结构入库入库日期选择日期导入取消确定中的数据光猫导入中获取当前时间并赋值给入库日期入库日期发生变化保存到中关闭模态框清除数据如果没有文件

实现的效果如下图

参考文献网址: https://blog.csdn.net/qq_3900...
https://blog.csdn.net/liyi_mo...

安装依赖

npm install xlsx --save

引入

import XLSX from "xlsx"
Vue.prototype.XLSX = XLSX

结构

data中的数据

gmDrform:{storageTime:""},//光猫导入
gmDr:false,
arrList:[],

methods中

gmDrClick(){ // 获取当前时间,并赋值给入库日期
    this.gmDr=true
    this.gmDrform.storageTime=this.nowTime()
  },

  gmDrTimeChange(val){//入库日期发生变化,保存到gmDrform.storageTime中
    this.gmDrform.storageTime=val
  },

  gmDrClose(){//关闭模态框,清除数据
      this.$refs.gmDrform.resetFields();
  },

importExcel() {
    this.dialogChangePwdVisible = true;
    this.$refs.uploadExcel.click();
        },
readExcel(e) {
    const files = e.target.files;
    if (files.length <= 0) {
        //如果没有文件名
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary"
            
        });
      const wsname = workbook.SheetNames[0]; //取第一张表
      const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
      // console.log(ws,666);
      let arr = [];
      ws.forEach((value, index, ws) => {
        arr.push({
            typeNo: ws[index]["光猫型号"] + "",
            boxNo: ws[index]["光猫箱码"] + "",
            snNos: ws[index]["光猫SN码"] + "",
            storageTime:this.gmDrform.storageTime+"",
            name:"光猫",
            category:"光猫",
            remarks:"",

        });
      })
      for(let i in arr){
          let item = arr[i]
          for(let key in item){
            // console.log(item[key]);
            if(item[key] == "undefined"){
              delete item[key] 
            }
          }   
          }       
          this.arrList=arr//给arrList赋值,确定导入时传入
    } catch (e) {
        return false;
      }
    };
    fileReader.readAsBinaryString(files[0]);
},

  gmDrSure(){//确定导入
      let headers={//axios发送请求时,需要配置请求头
            headers:{ "Accept": "application/json","Content-Type": "application/json" }  
            }
      this.startLoading();
      let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";
      this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {
      this.$message.success("导入成功！");
      this.gmDr = false;
      this.handleCurrentChange(1);
      this.$refs.uploadExcel.value = "";//把之前导入的清空
      if(res.data.flag==0){
        this.$message("导入表头不正确")
        this.gmDr =true
      }
    },(error) => {
        this.$refs.uploadExcel.value = "";//把之前导入的清空
    })
},

GPU云服务器云服务器 jsp中导入方式 body中导入jsp 生成excel文件 excel文件导入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104631.html

使用 SpreadJS 实现 JavaScript 中导入和导出Excel文件

摘要：而作为一款深受用户喜爱的电子表格工具，借助其直观的界面出色的计算性能和图表工具，已经成为数据统计领域不可或缺的软件之一。使用实现的导入和导出通过纯，您完全可以实现导入和导出文件功能，并为最终用户提供与这些文件进行交互的界面。 JavaScript是一个涵盖多种框架、直译式、可以轻松自定义客户端的脚本语言，在 Web 应用程序中，更加易于编码和维护。而Excel 作为一款深受用户喜爱的电...

Jioby 2019-08-23 18:31 评论0 收藏0
vue.js中如何导出Excel表格

摘要：有一个项目需求，要求在前端项目中导出表格，经过查找代码确实可以实现，具体实现步骤为安装依赖导入两个下载和，在目录下新建文件夹，里面放入和两个文件在引入这两个文件在组件中使用导出的方法序号昵称姓名上面设置的表格第一行的标题上面的是里对有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 1.安装依赖 npm install -S ...

lunaticf 2019-08-23 18:03 评论0 收藏0
Vue.js应用性能优化：第一部分---介绍性能优化和懒加载

摘要：我的目标是使本系列成为关于应用程序性能的完整指南。代码分割就是将应用程序分割成这些延迟加载的块。总结延迟加载是提高应用程序性能并减少其大小的最佳方法之一。在本系列的下一部分中，我将向您展示如何使用和路由来分割应用程序代码。当移动优先（mobile-first）的方式逐渐成为一种标准，而不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章...

ZweiZhao 2019-08-26 18:27 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0