ajax接口接收文件排坑(一)

先说结论

如果你在用ajax接口接收文件时遇到文件保存后打开报错的情况,请尝试在请求header头中加入responseType: arraybuffer

排坑过程

最近在对接前后端文件传输接口时遇到的问题,后端返回xlsx文件,前端使用new blob()方法从接口返回的数据中重新生成文件。但是
生成的文件用excel打开总是报错。尝试在浏览器或Postman中调用接口保存文件都没有问题。

一开始各种尝试改变new blob方法的type参数没有效果。查看blob方法文档
最坑的就是这里Blob(blobParts[, options])blobParts what fuck is blobParts? 文档中给出的示例有
new Blob([JSON.stringify(debug, null, 2),{type : 'application/json'});so 一个包含字符串的数组?还有一段从blob中读取数据
reader.readAsArrayBuffer(blob);可以看出这里读出的数据应该是arraybuffer。

再看一下XMLHttp​Request​.response​Type的官方文档
arraybuffer的解释 是一个包含二进制数据的 JavaScript ArrayBuffer 。另外我在另一篇Creating a Blob from a base64 string in JavaScript
的提问中当中看到有高手给出的答案中指出了,想要得到blob你先要得到ArrayBuffer, text, and JSON

结论

到这里我们基本已经得到答案了,生成blob对象进而生成文件我们需要ArrayBuffer, text, or JSON这种三种数据类型的某一种。

测试验证

后端Java,代码当中使用的是 BufferedOutputStream 类来返回数据。前端分别测试了”json””text”””arraybutter””blob”四种responseType
arraybutter和blob都可以正确的生成文件。

参考文章

MDN解释
java io系列12之 BufferedInputStream(缓冲输入流)的认知、源码和示例
深入理解xhr的responseType中blob和arrayBuffer


 上一篇
谁能真正make American greate again? 谁能真正make American greate again?
今天第一次知道杨安泽(Andrew Yang),美籍华裔祖籍台湾正在准备参加2020年美国总统大选。政治主张中主要的一条是要给每个满18周岁的美国人每月发1000美元。 为什么,以及如何做到基础职工的失业不可避免现在的工业自动化是如此,未
2019-04-24
下一篇 
Superset学习之连接MongoDB Superset学习之连接MongoDB
集成 MongoDB方法一:mongodb-BI,已验证MongoDB需要安装mongdoDB BI-connector 插件,该插件的功能是使mongoDB支持Sql查询语句,从而应对各种BI工具的连接,官方文档中列举了其支持的各种BI工
2019-03-26 Micheal
  目录