vue axios 下载zip 解压报错 responseType blob arraybuffer

Amy##

已于 2022-01-24 09:34:37 修改

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue zip

于 2021-02-20 14:18:01 首次发布

本文链接：https://blog.csdn.net/Amy126/article/details/113882421

在使用Vue和Axios下载Zip文件时遇到无法打开的问题，错误提示为'不可预料的文件末端'。排查后发现并非后端文件流处理问题，而是前端处理不当。前端代码中涉及到的responseType设置可能影响了文件下载，特别是Mock模块可能导致Ajax请求响应的Blob类型变为乱码。通过检查并修改mock.js，移除特定代码后，Zip文件能够正常下载并解压。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调试一套代码生成的系统，发现在下载代码zip的时候，zip 总是打不开，报错“不可预料的文件末端”啥的，查看zip 属性，发现文件字节为0，并且zip 包的大小与后端返回的字节大小不一致，起初一直调试后端，以为是后端文件流处理有问题，调试了N久，确认问题出现在前端，由于本人是后端开发，对于vue 不是很熟悉，开始了漫长的查找问题的路程，先贴一下前端代码

export function handleDown(table) {
    return request({
    url: baseUrl + '/gen/generator/code',
    method: 'post',
    data: table,
    responseType: 'arraybuffer'
  }).then((response) => { 
    const blob = new Blob([response.data], {type: 'application/zip'})
    const filename = table.tableName + '.zip'
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = filename
    document.body.appendChild(link)
    link.click()
    window.setTimeout(function () {
      URL.revokeObjectURL(blob)
      document.body.removeChild(link)
    }, 0)
  })

看起来和网上绝大多数方案一致，一直不得其解，直到看到一篇帖子,
帖子里提及“mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码”
赶紧检查项目里的mock.js
在这里插入图片描述
红框里的代码是手动加上去的，加上之后再次下载zip，能够成功解压，并且文件大小一致。
记录一下这个坑