当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 21:14:18 vue.js

项目使用的Element上传组件。要求:要求很简单。导入Excel数据。如果导入成功,会提示“导入成功”。如果导入失败,直接下载后台返回的excel文件流。我遇到的问题是一开始采用了upload组件的默认上传行为,但是由于upload组件默认是post请求,请求时不能指定responseType="blob",下载的excel表会提示文件已损坏,无法打开。贴一下当时的代码:上传错误时后端返回的文件流:如果直接使用后端返回的文件流数据创建Blob对象(blob=newBlob([data])),那么使用URL.createObjectURL(blob)得到一个url赋值给a标签,下载的文件打不开。该方案使用上传组件的http-request来覆盖默认的上传行为,实现自定义上传。注意(重要):responseType:"blob"是请求时必填参数,否则下载的excel表会提示文件损坏,扩展请求打不开,response='blob',获取文件流,而json返回数据是直接下载的,需要显示提示信息或者错误信息,需要进行转换。因为当请求失败时,后端返回的json对象,如:{"messsage":"sparepartexception","code":301,"success":false}也被转换成了blob。思路:根据response返回内容的MIMETYPE判断。类型:下载文件或者做一些JSON数据提示操作。如果是JSON类型,通过readAsText将Blob转成JSON格式。此方法应该支持IE10及IE10以上版本,具体请自行查看。请求时,response='arraybuffer'很短。如何将数据arraybuffer转换为JSON对象?该方法支持的浏览器可以自行查看。