问题:在postman上请求后端接口时,接口返回的是正常的二进制文件流,但是在bff层通过axios请求到的数据是文件内容的unicode码,导致Blob处理不了,出现文件打不开的情况
问题具体描述
但是经过项目bff层的axios请求后的响应数据为文件的unicode码,通过Blob处理后文件打不开(其实是因为Blob处理不了unicode,所以导致的这个问题)。问题的根本在于bff层axios请求得到的数据和后端实际返回的数据格式不一样。
在axios发送请求时,设置responseType的值为arrarybuffer,此时获取到的数据直接是一个buffer文件流,可以直接返回到前端下载,不设置则获取到的是文件内容。
axios({
method: 'POST',
baseURL: BASE_URL,
data: requestParams,
responseType: 'arrarybuffer'
}).then(
(response) => {
const { data } = response
const reg = /filename="(.*)"/
const filename = reg.exec(response?.headers['content-disposition'])[1]
return {
data, filename
export default function downloadBlob(data, fileName, fileType) {
let fileTypeMime = ''
switch (fileType) {
case 'pdf': fileTypeMime = 'application/pdf;chartset=UTF-8'; break
case 'png': fileTypeMime = 'image/png'; break;
case 'doc': fileTypeMime = 'application/msword'; break;
case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break;
case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break;
case 'gif': fileTypeMime = 'image/gif'; break;
case 'svg': fileTypeMime = 'image/svg+xml'; break;
case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break;
case 'txt': fileTypeMime = 'text/plain'; break;
case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break;
case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break;
case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break;
case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break;
case 'zip': fileTypeMime = 'application/zip'; break;
case '7z': fileTypeMime = 'application/x-7z-compressed'; break;
const buf = Buffer.from(data, 'binary')
const blob = new Blob([buf], {
type: fileTypeMime
if ("download" in document.createElement("a")) {
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
navigator.msSaveBlob(blob, fileName);
www.cnblogs.com/gerryjune/p…
www.jianshu.com/p/b492e33c9…
蛋蛋是个前端菜鸟