【前端技巧】-导出功能实现

一、配置axios

因为默认服务器响应的数据类型是json，要改为blob

exportDeviceReport(params, fileName) {
  return axios
      .post('接口地址', params, {
      responseType: 'blob',
  })
  .then(res => {
      return downFile(res, fileName)
      })
  }

二、配置导出方法 - downFile

在downFile.js中

/**
 * @desc 文件下载
 *
 * @export
 * @param {String} url
 * @param {string} [name='download']
 * @returns {Void}
 */
export default function(url, name = "download") {
  let a = document.createElement("a");
  if (typeof url !== "string") {
    a.href = window.URL.createObjectURL(url);
  } else {
    a.href = url;
  }
  a.download = name;
  a.click();
  window.URL.revokeObjectURL(a.href);
}

三、页面调用接口时

api
  .exportDeviceReport(
    {
      //导出需要的参数
    },
    `导出文件名.导出格式`
  )

四、若是在导出前 以防后端导出接口报错，需要抛出错误信息，可进行以下处理：

//获取错误
const readFileAsync = file => {
    return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
    resolve(reader.result)
}
    reader.onerror = reject
    reader.readAsText(file)
})
}


const exportData = async () => {
//导出方法
  const blob = await api.exportSurveyResult()  //调用后端导出接口
  const isFile = blob.type === 'application/octet-stream'

if (!isFile) {
   const err = await readFileAsync(blob) //获取错误抛出
   const { errmsg = '' } = JSON.parse(err) || {}
   Message.error({ message: errmsg })
   return
}

 const nowTime = dayjs(new Date()).format('YYYY年MM月DD日 HH时mm分ss秒')
 useDownload(blob, `${name} ${nowTime}.xlsx`) //调用导出方法
}