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>

 下载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);
};