get/post请求导出文件及各自的优缺点

一、get请求导出文件

1、window.open(url)

会自动打开一个标签页，下载完后会自动关闭这个标签页。

2、window.location(url) 或 location.href = url

在当前标签页下载。

3、< a href=“url” download=“filename”>点击链接下载< /a>

在当前标签页下载。

总结

优点：代码简单。
缺点：当导出失败时，返回的错误信息会覆盖原来的页面，错误信息可读性差。

二、post请求导出文件

1、思路

通过判断返回值的header.‘content-type’ 是否是 application/octet-stream，来确定文件导出是否成功！
content-type：

1. application/octet-stream： 返回值类型为二进制流，即导出成功；
2. application/json;charset=utf-8：返回值类型为json格式，即导出失败信息。由于我们请求的时候设置了responseType=‘blob’，所以返回值会被转换成二进制流。

2、实现

// 以axios为例
axios({
    url,
    method: 'post',
    responseType: 'blob',
    params
  })
    .then(async (res) => {
      const {
      data, 
      status, 
      statusMsg, 
      headers: {'content-type': contentType}
      } = res
      if (status === 200) {
      	// 导出失败，返回错误信息
      	if (contentType !== 'application/octet-stream') {
      		// 将返回的blob格式的返回值，转成对象
      		const responseMessage = JSON.parse(await new Response(responseData).text())
      		const errorMsg = responseMessage.msg || statusMsg
      		// 给出导出错误提示
      		alert(errorMsg)
      	} else {
	        const blob = new Blob([data])
	        // 非IE下载
	        if ('download' in document.createElement('a')) {
	          const elink = document.createElement('a')
	          elink.download = 'fileName.xlsx'
	          elink.style.display = 'none'
	          elink.href = URL.createObjectURL(blob)
	          document.body.appendChild(elink)
	          elink.click()
	          // 释放 通过调用 URL.createObjectURL() 创建的 URL 对象
	          URL.revokeObjectURL(elink.href)
	          document.body.removeChild(elink)
	        } else {
	          // IE10+
	          navigator.msSaveBlob(blob, fileName)
	        }
      	}
      } else {
      	alert(statusMsg)
      }
    })
    .catch((err) => {// 处理错误})

总结

优点：当导出失败时，可以以一种更优雅的方式展示错误提示信息。
缺点：代码复杂。