vue3 ant ts 实现导入导出

一、导出

接口封装

static downloadPost(url: string, body: any,name: string) {
    
    
    return request({
    
    
      method: 'post',
      url:url,
      data: body || {
    
    },
      responseType: 'blob'
    }).then((res: any) => {
    
    
      if (!res) {
    
    
        message.error('导出失败')
        return
      }
      console.log('res:',res)
      let url = window.URL.createObjectURL(new Blob([res], {
    
    type: 'application/vnd.ms-excel'}))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      if(!name || typeof name != "string"){
    
    
        name = "导出文件"
      }
      link.setAttribute('download', name + '.xls')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    })
  }  

页面调用接口

// 导出
const getExport = (): void => {
    
    
  loading.value = true;
  Http.downloadPost("/scmp-eosat-svc/v1/vendor/alis/product/export", 
  	{
    
     ...params },
   `外包异常联络单产品批次${
      
      props.alisCode}`)
  .then(() => {
    
    })
  .finally(() => {
    
    
      loading.value = false;
    });
}

二、导入

 <a-button type="primary" @click="visible = true" :loading="loading">
   <upload-outlined />
   上传
 </a-button>
 <a-modal v-model:visible="visible" centered title="附件上传" @ok="getUpload">
   <a-upload-dragger
     v-model::file-list="fileUrl"
     action="/cnap-assistant-svc/v1/file/upload"
     :headers="headers"
     :max-count="1"
     :data="{ filePath: 'iwork/admin', bucketName: 'file-system-static-bucket' }"
     @change="handleChange"
   >
   <p class="ant-upload-drag-icon">
     <CloudUploadOutlined />
   </p>
   <p class="ant-upload-text">将文件拖拽到此处上传</p>
   </a-upload-dragger>
 </a-modal>
 <script lang="ts" setup>
 	import {
      
       PlusOutlined, ExclamationCircleOutlined, CloudUploadOutlined, UploadOutlined } from '@ant-design/icons-vue';
 	import {
      
       Modal, message } from 'ant-design-vue';
	const userStore = useUserStore();
	const headers = {
      
       'X-Access-Token': userStore.getToken, appId: AppGlobal.appId };
	const visible = ref<boolean>(false);
	const fileUrl = ref('');
	const attachmentInfoList = ref<Array>([])
	const loading = ref<boolean>(false);

	// 上传
const	handleChange = (info) => {
      
      
  if (info.file.status !== 'uploading') {
      
      
    // console.log(info.file.response.data, "info.fileList");
    // 单个文件
    fileUrl.value = info.file.response.data;
    // 多个文件
    // fileList.value = info.fileList.map(e => e.response.data);
  }
  if (info.file.status === 'done') {
      
      
    message.success(`${ 
        info.file.name} 文件上传成功`);
  } else if (info.file.status === 'error') {
      
      
    message.error(`${ 
        info.file.name} 文件上传失败`);
  }
};
const getUpload = async(): void => {
      
      
  await abnormalOtherDetails.createAppendix({
      
      
    fileUrl: fileUrl.value,
  }).then((res) => {
      
      
      // 列表
      attachmentInfoList.value = res?.data || [];
    })
    .finally(() => visible.value = false );
    // 刷新列表
    getList()
};
 </script>