vue Excel导入，下载Excel模板，导出Excel

vue  Excel导入，下载Excel模板，导出Excel

vue  Excel导入，下载Excel模板

<template>
    <div style="display: flex;">
      <el-button
        @click="handleDownload"
        class="button_search"
        type="primary"
        size="medium" >下载模板</el-button>
      <el-upload
        style="display: inline-block"
        :action="uploadUrl_file"
        name="file"
        :headers="{ 'x-token': token }"
        :file-list="exportfileList"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :show-file-list="true">
        <el-button
          class="button_search"
          type="primary"
          size="medium"
        >导入</el-button>
      </el-upload>
    </div>
</template>

<script>
  const rootpath = process.env.VUE_APP_BASE_API;
  import { getToken } from "@/utils/auth";
  var busiContractorImport = "/business/fourth/excel/import.do"; //导入接口
  export default {
    name: 'importExcel',
    data(){
      return{
        uploadUrl_file:'',
        token: getToken() ,
        exportfileList: [],
        showShade:false
      }
    },
    mounted() {
      let vm = this;
      vm.uploadUrl_file = rootpath + busiContractorImport +"?excelHandler=dictCheckContentByMyselfImportHandler"; //上传地址
    },
    methods:{
      // 下载模板
      handleDownload() {
　　　　　// 把模板放在 : public/excel/隐患排查自建自建隐患库
        window.open("excel/隐患排查自建隐患库.xlsx");
      },
      // 导入
      handleFileError(result, file, exportfileList) {
        this.$notify.error("导入失败，错误：" + result);
        this.showShade = false;
        this.exportfileList = [];
      },
      handleFileSuccess(result, file, exportfileList) {
        var that = this;
        var code = result.code;
        if (code === "0") {
          that.$notify({
            title: "成功",
            message: "导入成功",
            type: "success",
            duration: 2000
          });
          that.$emit("importExcel")
        } else {
          that.$notify.error({
            title: "导入失败",
            message: result.msg,
            duration: 2000
          });
        }
        that.showShade = false;
        that.exportfileList = [];
      },
    }
  };
</script>

<style scoped>

</style>

导出Excel

第一步，创建文件:  exportData.js

import request from '@/utils/request'
import { getToken } from "@/utils/auth";

//列表导出
export function exportsData(params,url,fileName) {
  return request({
    url: url,
    method: "get",
    params,
    responseType: "blob",
    headers: { "x-token": getToken() }
  }).then((result) => {
    const excelBlob = result;
    const elink = document.createElement("a"); // 创建a标签
    elink.download = fileName;
    elink.style.display = "none";
    const blob = new Blob([excelBlob]);
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
  });
}

第二步，添加事件

<el-button
              @click="exportBtn"
              class="button_search"
              size="medium"
              type="primary"
            >导出</el-button>

import { exportsData } from "@/api/exportData"; //引入接口

//导出数据
exportBtn(){
　　let that = this;
　　var date = new Date();
　　let listQuery = { 接口需要的参数
　　　　date:date.getTime(),
　　　　current:that.listQuery.current,
　　　　size:that.listQuery.size,
　　　　sord:'asc'
　　}
　　exportsData(listQuery,"/business/fourth/basicList/scqy/export.do","仓库清点.xlsx")
},