vue3 批量导入、下载、批量导出

批量导入（带信息反馈）：

<!-- 批量创建 批量导入 -->
<file @refresh="refresh"></file>

组件：

<template>
  <div class="export-wrap">
    <el-upload
      class="upload-demo"
      action="#"
      :before-upload="handleBefore"
      :http-request="httpRequest"
      accept="xlsx"
    >
      <el-button type="primary" size="small">
        <i class="iconfont icon-piliangchuangjian"></i>批量创建</el-button
      >
    </el-upload>
    <el-dialog title="批量导入" v-model="dialogVisible" width="30%">
      <div class="export-main" v-if="scssce">
        <div class="export-img">
          <img src="@/assets/downloadC.png" />
          <span class="green">上传成功</span>
          <div class="linegreen"></div>
        </div>
        <div class="export-text">{{ msg }}</div>
      </div>
      <div class="export-main" v-else>
        <div class="export-img">
          <img src="@/assets/downloadF.png" />
          <span class="red">上传失败</span>
          <div class="linered"></div>
        </div>
        <div class="export-text">
          <span class="msg-text" v-for="(item, index) in msgList" :key="index">
            {{ index + 1 }}、{{ item.errorMsg }}
          </span>
        </div>
        <div class="export-tips">请修正后重新导入</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { createBatchApi } from "@/http/workOrder/workOrderPool.js";//接口
export default {
  emits: ["refresh"],
  props: {
    // kindId: {
    //   type: String,
    // },
  },
  setup(props, { emit }) {
    const data = reactive({
      dialogVisible: false,
      msg: "",
      scssce: true,
      msgList: [],
    });
    // 文件上传处理
    const httpRequest = (options) => {
      let fileFormData = new FormData();
      fileFormData.append("file", options.file, options.file.name);
      // fileFormData.append("orgId", data.kindId);
      createBatchApi(fileFormData).then((res) => {
        if (res.data.code == 200) {
          let resdata = res.data.data;
          console.log(resdata, "resdata");
          if (resdata.code == "OK") {
            data.dialogVisible = true;
            data.scssce = true;
            emit("refresh");
            data.msg = resdata.msg;
          } else if (resdata.code == "ERROR") {
            data.dialogVisible = true;
            data.scssce = false;
            data.msgList = resdata.data;
          }
        }
      });
    };
    // 上传之前
    const handleBefore = (file) => {
      const fileType = file.name
        .substring(file.name.lastIndexOf(".") + 1)
        .toLowerCase();
      const isExcel = fileType === "xlsx";
      if (!isExcel) {
        ElMessage({
          message: "请上传xlsx类型文件",
          type: "warning",
        });
        return false;
      }
    };
    return {
      ...toRefs(data),
      httpRequest,
      handleBefore,
    };
  },
};
</script>

<style lang="scss" scoped>
.export-wrap {
  display: inline-block;
  text-align: left;
  .upload-demo {
    display: inline-block;
    margin: 0 10px;
    .el-button {
      padding: 10px 17px;
    }
    /deep/ .el-upload-list {
      display: none;
    }
  }
  .export-main {
    text-align: center;
    .export-img {
      height: 100px;
      display: block;
      line-height: 23px;
      .green {
        display: block;
        color: #4a5669;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
      .red {
        display: block;
        color: #4a5669;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
      .linegreen {
        width: 80%;
        height: 6px;
        background: #56be94;
        border-radius: 5px;
        margin: 10px auto;
      }
      .linered {
        width: 80%;
        height: 6px;
        background: #e1e4e8;
        border-radius: 5px;
        margin: 10px auto;
      }
    }
    .export-text {
      display: block;
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
      margin-top: 38px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 23px;
      color: #898ea0;
      .msg-text {
        width: 80%;
        margin: 0 auto;
        display: block;
        line-height: 36px;
        text-align: left;
      }
    }
    .export-tips {
      display: block;
      width: 80%;
      margin: 10px auto;
      margin-top: 10px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
      color: #f57171;
      text-align: left;
    }
  }
}
</style>

 下载Excel（返回一个下载地址）

 const downloadFn = () => {
      downloadTemplateApi().then((res) => {
        window.open(
          process.env.VUE_APP_DOWNLOAD_URL + res.data.data,
          // res.data.data,
          "_self"
        );
      });
    };

  下载Excel（返回一个blob）

// 下载模版
export const filterBlob = (data, name) => {
  let blob = new Blob([data], {
    type: 'application/vnd.ms-excel'
  });
  // 创建一个临时的url指向blob对象
  let url = window.URL.createObjectURL(blob);
  // 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
  let a = document.createElement('a');
  a.href = url;
  a.download = name;
  a.click();
  // 释放这个临时的对象url
  window.URL.revokeObjectURL(url);
};

 导出（返回一个blob）

 // 导出接口

 export const exportApi = data =>

  api({

    url: '/api/duty-management/excel',

    method: 'post',

    data: data,

    responseType: "blob"

  });

    // 导出提交
    submitFn() {
      let data = {
        dutyDateStr: this.ruleForm.dutyDateStr,//各种参数
        orgId: this.ruleForm.orgId.join(',')
      };
      exportApi(data).then(res => {
        if (!res) {
          return;
        }
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '值班表.xls');
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
      });
    }

 

 

补充：

‘doc’ => ‘application/msword’,
‘bin’ => ‘application/octet-stream’,
‘exe’ => ‘application/octet-stream’,
‘so’ => ‘application/octet-stream’,
‘dll’ => ‘application/octet-stream’,
‘pdf’ => ‘application/pdf’,
‘ai’ => ‘application/postscript’,
‘xls’ => ‘application/vnd.ms-excel’,

‘xlsx’=>response.setContentType(“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”);

'ppt' => 'application/vnd.ms-powerpoint',
'dir' => 'application/x-director',
'js' => 'application/x-javascript',
'swf' => 'application/x-shockwave-flash',
'xhtml' => 'application/xhtml+xml',
'xht' => 'application/xhtml+xml',
'zip' => 'application/zip',
'mid' => 'audio/midi',
'midi' => 'audio/midi',
'mp3' => 'audio/mpeg',
'rm' => 'audio/x-pn-realaudio',
'rpm' => 'audio/x-pn-realaudio-plugin',
'wav' => 'audio/x-wav',
'bmp' => 'image/bmp',
'gif' => 'image/gif',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'png' => 'image/png',
'css' => 'text/css',
'html' => 'text/html',
'htm' => 'text/html',
'txt' => 'text/plain',
'xsl' => 'text/xml',
'xml' => 'text/xml',
'mpeg' => 'video/mpeg',
'mpg' => 'video/mpeg',
'avi' => 'video/x-msvideo',
'movie' => 'video/x-sgi-movie',