Vue 下载excel模版 导入excle文件

一. 利用a标签下载excel模版

<div class="xzwj" @click="handlexzjdcmbexcel">
   <img src="./../../../../assets/img/xxgl/excel.png" alt="">
  《模版下载》.xsl
</div>

handlexzjdcmbexcel() {
    // 创建a标签
    let link = document.createElement('a');
    // 设置样式隐藏
    link.style.display = 'none';
    // excel模版要放在public静态文件夹下 而且路径只能是/开头
    link.href = '/static/车辆信息.xlsx';
    // 下载等文件名称
    link.download = "车辆信息.xlsx"; // 文件名称
    // 把创建的a标签追加到页面上
    document.body.appendChild(link);
    // 模拟a标签点击
    link.click();
    //用完即删 释放内存
    document.body.removeChild(link);
},

注意要下载的模版必须是在静态文件夹下 不然npm run build 打包之后拿不到 而且引用的文件必须是/开头不能是./

二. 导入excel文件

使用el-element自带的组件

<el-upload drag
  ref="uploadRef"
  limit="1"
  :auto-upload="false"
  accept=".xlsx, .xls"
  :data="uploadData"
  :action="uploadUrl"
  :before-upload="beforeUploadFile"
  :on-change="fileChange"
  :on-exceed="exceedFile"
  :on-success="handleSuccess"
  :on-remove="handleRemove"
  :on-error="handleError"
  :file-list="fileList">
     <img src="./../../../../assets/img/xxgl/upload.png" alt="">
     <div class="el-upload__text" style="margin-top:0.1rem;">
        将文件拖到此处，或<em>点击上传</em>
     </div>
     <div class="el-upload__text" style="margin-top:0.1rem;">
        上传已填写车辆信息的文件，仅支持上传扩展名为.xls、.xlsx格式的文件
     </div>
</el-upload>

解释：limit ---上传的个数， auto-upload ---ture自动上传false手动上传，data---请求后端的字段 ，

action---请求的路径，before-upload---上传之前方法 ， on-change---change事件，on-exceed---文件超出个数限制时的钩子，on-success---文件上传成功时的钩子，on-remove---文件移出触发的函数，on-error---文件上传失败时的钩子，file-list---上传成功时文件存放。

 

 

// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
   this.$message.warning(`只能上传 ${this.limitNum} 个文件`);
},

// 文件状态改变时的钩子
fileChange(file, fileList) {
   this.yqboxFlag = true;         // 要求提示marignTop高度
   // this.fileList.push(file.raw);
   this.uploadfilstList.push(file.raw);
},

// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUploadFile(file) {
    this.uploadData = {
        nodeType: this.$store.state.nodeType,
        nodeId: this.$store.state.nodeId,
        verType: this.tyIndex == 0 ? '1' : this.tyIndex == 1 ? '2' : 0,  // 1机动车 2电动自行车
     }
     let extension = file.name.substring(file.name.lastIndexOf('.')+1);
     let size = file.size / 1024 / 1024;
     if((extension == 'xlsx') || (extension == 'xls')) {
                
      }else {
          this.$message.warning('只能上传后缀是.xlsx/.xls的文件');
      }
     if(size > 2) {
        this.$message.warning('文件大小不得超过2M');
     }
},

// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
   this.uploadLoading = true;
   // console.log('----文件上传成功----', res, file, fileList)
   if(res.code == 200) {
       this.$message.success('文件上传成功');
       this.$emit('handleuploadclose');  
       this.dialogFormVisible = false;
   }else {
       this.$message.warning(res.msg);
   }
       this.uploadLoading = false;
},

// 文件上传失败时的钩子
handleError(err, file, fileList) {
    this.$message.error('文件上传失败');
},


UploadUrl(){
   // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导            
   //致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
    return ""
},


// 文件移出触发的函数
handleRemove() {
   this.fileList = [];
   this.uploadfilstList = [];
   this.yqboxFlag = false;  // 要求提示marignTop高度
},


// 导入文件
uploadFile() {
   if (this.uploadfilstList.length == 0){
       this.$message.warning('请上传文件');
   } else {
       this.$refs.uploadRef.submit();
   }   
},