vue3+element-plus,实现excel模板下载和excel上传

1. 后端提供的Excel模板下载

获取模板

// 获取模板 
const getModel = async () => {
  let res = await getTemplateExcel({ excelTemplateType: 2 })
  let date = formatTimeToStr(new Date())
  const xlsx = "application/vnd.ms-excel"
  const blob = new Blob([res.data], { type: xlsx })
  let fileName = "分销商及其管理员Excel模板" + date + ".xlsx"
  let a = document.createElement("a")
  a.download = fileName
  a.href = window.URL.createObjectURL(blob)
  a.click()
  a.remove()
}

2. Excel上传

一键导入

   
      
   

import { ElMessage } from 'element-plus'
import { genFileId } from 'element-plus'
import { ElLoading } from 'element-plus'
import { getTemplateExcel, importerPartnerExcel } from '@/api/excel/excel.js'
import { formatTimeToStr } from '@/utils/date.js'
/**
 * Excel下载&上传 start
 */
// 获取模板
const getModel = async () => {
  let res = await getTemplateExcel({ excelTemplateType: 2 })
  let date = formatTimeToStr(new Date())
  const xlsx = "application/vnd.ms-excel"
  const blob = new Blob([res.data], { type: xlsx })
  let fileName = "分销商及其管理员Excel模板" + date + ".xlsx"
  let a = document.createElement("a")
  a.download = fileName
  a.href = window.URL.createObjectURL(blob)
  a.click()
  a.remove()
}


const uploadDisabled = ref(false); //上传文件弹框禁用
const upload = ref(null) //dom实例
// 一键导入
const One_click_import = () => {
  upload.value.submit();//点击按钮后上传
}
//覆盖默认的 Xhr 行为，自行实现上传文件的请求
const httpRequest = (item) => {
  let formData = new FormData();
  //获取上传文件
  formData.append("partnerExcelFile", item.file); //添加文件对象
  formData.append("coopPartnerId", userStore.userInfo.coopPartnerId); //添加文件对象
  const loading = ElLoading.service({
    lock: true,
    text: "加载中",
    background: "rgba(0, 0, 0, 0.7)",
  });
  tryCatch(//自己封装的trycatch
    async () => {
      let res=await importerPartnerExcel(formData)
      if (res && res.state === 1) {
        getData()//重新获取表格数据，业务需要
        upload.value.clearFiles()
        loading.close();
      } else {
        upload.value.clearFiles()
        loading.close();
        /**
               * 抛出异常，交给 {@link tryCatch} 模板方法处理
               */
        throw Error(res ? res.msg : '获取信息失败')
      }
    }
  )
};

//上传文件之前的钩子 若返回false或者返回 Promise 且被 reject，则停止上传
const beforeUpload = (file) => {
  const Xls = file.name.split(".");
  if (Xls[1] !== "xls" && Xls[1] !== "xlsx") {
    ElMessage({
      message: "请上传excel格式的文件!",
      type: "error",
    });
    return false;
  } else if (file.size / 1024 / 1024 > 250) {
    ElMessage({
      message: "请上传250M以下的文件!",
      type: "error",
    });
    return false;
  }
  return true;
};

// 需同时配置limit 和 on-exceed 可以在选中时自动替换上一个文件。
const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0] 
  file.uid = genFileId()
  upload.value.handleStart(file)
}
/**
 * Excel下载&上传 end
 */

封装接口

export const importerSalesUserExcel = (data) => {
  return service({
    url: `/aaa/bbb/excel/cccc`,
    method: 'post',
    data: data,
    headers: {
      "Content-Type": "multipart/form-data",//修改请求头为formData格式
    },
  })
}