html

<div class="mt-40">
            <div class="mtb-20">第一步：下载模板，批量填写订单信息</div>
            <a-button type="primary" ghost icon="vertical-align-bottom" size="large">
              <a href="/订单导入模板（企业）.xlsx" download="订单导入模板.xlsx" style="text-decoration: none"
                >下载模板</a
              >
            </a-button>
            
            <div class="mtb-20">第二步：上传填写好的订单列表</div>
            <a-upload
              name="file"
              :action="uploadUrlExcel"
              @change="handleChangeExcel"
              :headers="headers"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              :showUploadList="false"
            >
              <a-button type="primary" ghost icon="vertical-align-top" size="large">
                上传Excel
              </a-button>
            </a-upload>
			//导入失败弹窗
            <a-modal
              title="导入失败文件"
              style="top: 20px"
              v-model="bisible"
              @ok="handleSubmit2"
              :closable="false"
              :maskClosable="false"
            >
              <div style="margin-left: 50px">
                <p>
                  <strong>导入成功数量 : </strong>
                  <span>{
    
    {
    
     success }}</span>
                </p>
                <p>
                  <strong>导入失败数量 : </strong>
                  <sapn style="color: red">{
    
    {
    
     err }}</sapn>
                </p>
                <strong v-if="err == 0">全部导入成功！</strong>
                <strong v-else>是否下载导入失败文件？</strong>
              </div>
            </a-modal>
          </div>

js上传Excel

// 使用到的data
uploadUrlExcel: process.env.VUE_APP_API_BASE_URL + '/order/order/batchOrderImport', //上传url
headers: {
    
    
        token: Vue.ls.get(ACCESS_TOKEN)
      },
 bisible: false,   // 批量订单导入失败弹窗
 arrList: '',     // 失败的多条数据数组
 success: '',    // 导入成功条数
 err: '',		//  导入失败条数
// 批量下单
    handleChangeExcel(info) {
    
    
      console.log(11111111111, info, info.file.response)
      if (info.file.status === 'done') {
    
    
        let file = info.file.response.data
        if (file.failNum > 0) {
    
    
          this.bisible = true
          this.success = file.successNum
          this.err = file.failNum
          this.arrList = file.failDtoList
        } else if (file.failNum == 0 && file.successNum == 0) {
    
    
          this.$message.error(`无数据导入`)
        } else {
    
    
          this.$message.success('导入成功')
        }
      } else if (info.file.status === 'error') {
    
    
        this.$message.error(`${
      
      info.file.name} 导入失败.`)
      }
    },

失败文件下载

 // 失败文件处理
    handleSubmit2() {
    
    
      if (this.err == 0) {
    
    
        this.bisible = false
      } else {
    
    
        batchOrderExport(this.arrList).then(res => {
    
    
          const blob = new Blob([res], {
    
     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' })
          const a = document.createElement('a')
          // 生成文件路径
          let href = window.URL.createObjectURL(blob)
          a.href = href
          let fileName = '导入失败订单文件'
          // 文件名中有中文 则对文件名进行转码
          a.download = decodeURIComponent(fileName)
          // 利用a标签做下载
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          window.URL.revokeObjectURL(href)
        })
        this.bisible = false
      }
    },

// 失败上传处理的接口

//失败上传处理
export function batchOrderExport(parameter) {
    
    
  return axios({
    
    
    url: `/order/order/batchOrderExport`,
    method: 'post',
    data: parameter,
    responseType: 'arraybuffer',
    headers: {
    
    
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })
}