前端下载文件问题之如何获取报错信息

2024-01-07 23:11:43

问题:点击下载后。接口会生成并返回文件流。在极端情况下接口数据返回异常,需要抛出错误信息,比如后端拼接错误情况、空文件情况。
难点:responseType设置为Blob后,返回内容为二进制文件流,从而无法获取错误信息。文件流截图如下:
在这里插入图片描述
解决方法:FileReafer()方案解决,示例代码:


        if(res.data.success===undefined && res.data.type === 'application/json'){
          const fileReader = new FileReader()
          fileReader.readAsText(res.data,'utf-8')
          fileReader.onload = function(){
            const result = JSON.parse(fileReader.result)
            // 获取到接口json对象。
			// 	情况1:有返回msg和code码(通过和业务层协商获取),可根据result.code码,弹出result.msg提示语
			// 情况2: 返回正常,data为null,表明为空文件,弹窗提示为空文件取消下载。
          }
          return
        }

总结:
1.下载文件场景ResponseType:"blob"时,需要报错提示,通过new FileReader把返回的数据转成文件,从而读取错误信息;

2.文件下载的方法,组装成二进制流文件,通过content-disposition获取正确的中文件名。代码如下:

if (res.headers["content-disposition"]) {
    const fileName = decodeURIComponent(
      res.headers["content-disposition"].split("=")[1]
    );
    byteToFile(res.data, fileName);
    return true
  }

3.byteToFile,返回的文件流数据转化为路径,创建A标签,触发点击下载文件路径。

export const byteToFile = (data, fileName) => {
	  let blob = new Blob([data]); 
	  let url = window.URL.createObjectURL(blob); 
	  let aLink = document.createElement("a");
	  if (fileName) {
	    aLink.download = fileName;
	  }
	  aLink.href = url;
	  aLink.click();
}

;

文章来源:https://blog.csdn.net/qq_42259940/article/details/135391353
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。