gz、zip等压缩文件postman成功下载但是前端项目中下载解压失败

原因:

  • axios的配置错误和版本过低
  • 错误的前端代码尝试通过axios.post()下载文件,但未正确设置responseTypeContent-Type
  • 解决方案:更新axios版本并调整axios请求方式,确保responseType为'arraybuffer'
bash 复制代码
 const raw = JSON.stringify({
    //查询参数
  })

  axios({
    method: 'post',
    url: `请求链接`,
    data: raw,
    responseType: 'arraybuffer',	//1、注意:responseType arraybuffer
    headers: {
      'Content-Type': 'application/json; application/octet-stream', 	//2、注意Content-Type其他的
      Authorization:
        'Bearer xxxx'
    }
  }).then(function (data) {
    console.log(data)
    const blob = new Blob([data.data], { type: 'application/gzip' })	//'application/zip'
    const downloadUrl = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = downloadUrl
    link.setAttribute('download', 'file.gz') //file.zip
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) //下载完成移除元素
    window.URL.revokeObjectURL(downloadUrl) //释放blob对象
  })
相关推荐
他人是一面镜子,保持谦虚的态度几秒前
MATLAB画柱状图
前端·matlab·信息可视化
她和夏天一样热21 分钟前
【前端系列】优化axios响应拦截器
java·前端·axios
计算机相关知识分享39 分钟前
Web前端基础知识(五)
前端
蜗牛_snail1 小时前
Ant Design Vue 之可定位对话框
前端·javascript·vue.js
萧寂1731 小时前
vue2使用tailwindcss
前端
明月看潮生1 小时前
青少年编程与数学 02-006 前端开发框架VUE 04课题、组合式API
前端·javascript·vue.js·青少年编程·编程与数学
她和夏天一样热1 小时前
【前端系列】Pinia状态管理库
前端·axios·pinia
小彭努力中1 小时前
57.在 Vue 3 中使用 OpenLayers 点击选择 Feature 设置特定颜色
前端·javascript·vue.js·arcgis·openlayers
JINGWHALE11 小时前
设计模式 结构型 适配器模式(Adapter Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·适配器模式
DX_水位流量监测2 小时前
水库水雨情监测系统:水位、雨量、流量等参数全天候实时监测
大数据·开发语言·前端·网络·人工智能·信息可视化