VUE中导入excel文件

2019-06-12 admin

实现的效果如下图 图片描述

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

安装依赖

npm install xlsx --save

引入

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

结构

<el-dialog title="入库" class="dialogAdd" width="600px"  :visible.sync="gmDr"  @close="gmDrClose" >
      <el-form :model="gmDrform" :rules="addFormRules" ref="gmDrform" style="margin-right: 20px;" label-position="right" label-width="100px" size="small">

        <el-form-item label="入库日期"  prop="storageTime">
          <el-date-picker
            v-model="gmDrform.storageTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="gmDrTimeChange"
          ></el-date-picker>
        </el-form-item>

            <el-row style="width:100px;padding-right:10px">
                 <el-button  @click="importExcel" size="mini" style=" float:right">导入</el-button>
           </el-row> 
          <input type="file" ref="uploadExcel" v-show="false" accept=".xls,.xlsx" @change="readExcel">

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="gmDr = false">取 消</el-button>
        <el-button  size="mini" type="primary" @click="gmDrSure">确 定</el-button>
      </div>
    </el-dialog>

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 = "";//把之前导入的清空
    })
},

[转载]原文链接:https://segmentfault.com/a/1190000019453410

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67111.html

文章标题:VUE中导入excel文件

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
回到顶部