【工具】vue excel导入通用组件-模板导出组件

环境：

• vue@2.6.12

• element-ui@2.15.5

 

1.excel导入

组件代码：

//components/ExcelImport
<template>
  <div class="component-upload-image">
    <el-upload
      accept=".xls,.xlsx"
      :action="uploadImgUrl"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
    >
      <el-button 
      size="mini" 
      type="warning"
      icon="el-icon-upload2"
      plain
      >导入excel</el-button>
    </el-upload>
  </div>
</template>

<script>
/**
 * excel上传
 */
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      //注意
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ["xlsx", "xls"]
    };
  },
  props: {
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    api: {
      type: String,
      default: ""
    }
  },
  computed:{
    uploadImgUrl(){
      return process.env.VUE_APP_BASE_API + this.api;// 上传excel api地址
    }
  },
  methods: {
    handleUploadSuccess(res) {
      if(res.code == 200){
        this.$message({
          showClose: true,
          duration: 0,
          dangerouslyUseHTMLString: true,
          message: res.msg,
          type: 'success'
        });
        this.$emit('loadList');//加载列表
      }else{
        if(res.msg){
          this.$message({
            showClose: true,
            duration: 0,
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'error'
          });
        }else{
          this.$message.error('导入失败, 未知错误');
        }
      }
      this.loading.close();
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败, 请重试",
      });
      this.loading.close();
    },
  }
};
</script>

<style scoped lang="scss">
</style>

组件使用：

import ExcelImport from '@/components/ExcelImport';

export default {
  components: {
      ExcelImport
  }
}

<template>
  <ExcelImport 
     api="/xxxx/yyyy/import"
     @loadList="getList"
  />
</template>

2.excel模板导出(前端本地下载)

前提：获取本地路径

//main.js

//模板路径
Vue.prototype.$publicURL = process.env.BASE_URL

 模板存放位置：

 

模板导出组件代码：

//components/ModelExport

<template>
  <el-row>
    <el-button
      type="info"
      plain
      icon="el-icon-download"
      size="mini"
      @click="downFile"
      >下载模板
    </el-button>
  </el-row>
</template>

<script>
export default {
  props: {
    name:{
        type: String,
        default: ''
    }
  },
  methods: {
    // 下载文件
    downFile() {
      fetch(this.$publicURL + `download/${this.name}.xlsx`)
        .then((res) => res.blob())
        .then((blob) => {
          let eleLink = document.createElement("a");
          eleLink.style.display = "none";
          eleLink.target = "_blank";
          eleLink.setAttribute("download", `${this.name}.xlsx`);
          eleLink.href = URL.createObjectURL(blob);
          document.body.appendChild(eleLink);
          eleLink.click();
          URL.revokeObjectURL(eleLink.href);
          document.body.removeChild(eleLink);
        });
    },
  },
};
</script>

使用组件：

import ModelExport from '@/components/ModelExport';

export default {
  components: {
    ModelExport
  }
}

<template>
   <ModelExport name="方案库模板" />
</template>