vue ts 文件导入导出

1. Axios配置

/**********************下面代码是在相应拦截器下做的处理**************************/


// dataType 是自己封装的判断类型的工具函数，不重要
if (dataType(response.data) === 'Blob') {
  // 构造一个 Blob 对象 并设置文件类型
  const blob = new Blob([response.data], {
    type: 'application/vnd.ms-excel',
  })
  // 创建新的URL表示指定的blob对象
  const href = URL.createObjectURL(blob)
  const a = document.createElement('a')
  // 不隐藏可能会闪屏
  a.style.display = 'none'
  // 指定下载链接
  a.href = href
  // 指定下载文件名，这里也可以根据后端返回的文件名生成文件
  a.download = '订单'
  a.click()
  // 释放URL对象
  URL.revokeObjectURL(a.href)
}

2. 导出处理的代码

// 导出主要就是给一个 返回类型配置 blob，下面是经过封装的get方法
export const exportExcelListApi = (params: { categoryId: number }) => {
  return get<any>('/erp/sku/exportSkuByType', params, {
    responseType: 'blob',
  })
}
// 使用axios实例请求则是这样
export const orderListExportApi = (data: exportParamsType): Promise<any> => {
  return axios({
    url: '/order/agentExport',
    method: 'post',
    data,
    responseType: 'blob',
  })
}

3. 导入的处理代码

/**
 * @function: 导入sku列表数据
 * @params: any
 * @return:
 */
export const importExcelListApi = (data: {
  file: Blob
  categoryId: number
}) => {
  return post<any>('/erp/sku/importSkuByType', data)
}

// 在调用的地方需像下面这样处理
const { file } = fileData
const form = new FormData()
// 转成文件格式的数据，所有参数都放进form里面，让form对象作为参数
form.append('file', file)
form.append('categoryId', String(props.categoryId))
// 直接调用接口即可，切记只要能由form对象作为唯一参数（但是form对象里面可有多个参数）传进去
const res = await importExcelListApi(form as any)