Element 组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?

项目使用的 Element 的 upload组件。
需求:
需求很简单,导入 Excel 数据,如果导入成功,提示‘导入成功’,如果导入失败,直接下载后端返回的 excel文件流。
遇到的问题
刚开始采取的是 upload组件 默认上传行为的方式,
但是由于upload组件默认是 post请求,请求时无法指定 responseType="blob",下载下来的excel表会提示文件损坏,无法打开。

贴下当时的代码:
上传错误时后端返回的文件流:
Element <upload />组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?_第1张图片

如果直接用后端返回的文件流 data创建Blob对象(blob = new Blob([data])),再用 URL.createObjectURL(blob) 得到一个url赋值给a标签,下载下来的文件是无法打开的。
Element <upload />组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?_第2张图片

解决方案
采用 upload组件的 http-request,覆盖默认的上传行为,实现自定义上传。
Element <upload />组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?_第3张图片

注意(重要):

  • 请求时 responseType: "blob" 该参数必填,不然下载下来的excel表会提示文件损坏,无法打开

延伸
请求时,response = 'blob',

  • 得到文件流,直接下载
  • 得到 JSON 返回数据,需要展现 提示信息 或 错误信息,那么需要转换一下。因为请求失败时,后端返回的json对象,如:{"messsage":"备件异常","code":301,"success": false},也被转成了 blob。
  • 思路:根据得到的 response.type 返回内容的 MIME TYPE 来判断:

      下载文件 或 去做一些 JSON 数据提示的操作。
      如果是 JSON类型 那就把 Blob 通过 readAsText 转为JSON格式。
      这种方式应该是支持IE10和IE10以上版本,具体的自己查查。

    Element <upload />组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?_第4张图片

请求时,response = 'arraybuffer'

  • 简略点 如何将数据 arraybuffer 转成 JSON 对象?
    Element <upload />组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?_第5张图片
    该方法支持的浏览器自行查查。

你可能感兴趣的:(Element 组件导入Excel数据,如导入失败,如何直接下载带错误信息的 Excel?)