当前位置: 首页 > news >正文

前端js下载zip文件异常问题解决

目录

一,本文解决问题如下

二,原下载代码

1,ajax get 下载文件

2,下载异常图:

三,成功下载的

1, JQuery 实现文件下载xhr

2,图例


引言:

本人使用的ajax 下载,由于下载CSV,文本之类的没有问题,下载zip是出现各种问题。发现是设置responseType:"blob"没生效,项目中又没有maskjs,无法在提交请求之前重新responseType定义。再就是在整个jquery代码中找到实现真是太费眼睛了,后续用xhr实现摆脱了ajax只能下载文本的问题,这个也是处理问题的关键。

一,本文解决问题如下

1,mock模块会影响原生的ajax请求,使得服务器返回的blob类型变成乱码
2,压缩文件出现不可预料的压缩文件末端
3,后端生成Zip文件通过浏览器下载后文件损坏,无法打开

posman已经测试了,能正常下载,不是后端的问题

二,原下载代码

1,ajax get 下载文件

   $.ajax({type='get',url:url,timeout=30000,msg:param,responseType:"blob"//没生效},succes:function(response,status,xhr){let fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')let type =  xhr.getResponseHeader("content-type")let blob = new Blob([data],{type:type}) ;设置类型并未生效var link = document.createElement('a');link.download = fileName;link.style.display = 'none';link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);},error:function(date){console.log("下载失败")})

2,下载异常图:

文件损坏

压缩文件出现不可预料的压缩文件末端


       

三,成功下载的

1, JQuery 实现文件下载xhr

var xhr = new XMLHttpRequest();xhr.open('get', url, true);    xhr.responseType = "blob";  // 返回类型blobxhr.setRequestHeader("Content-type", "application/json;charset=utf-8"); xhr.setRequestHeader("msg", "param");xhr.onload = function () {if (this.status === 200) {var blob = this.response;var reader = new FileReader();reader.readAsDataURL(blob);  // 转换为base64,可以直接放入a标签hrefreader.onload = function (e) {// 转换完成,创建一个a标签用于下载var a = document.createElement('a');var fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')a.download = fileName;a.href = e.target.result;$("body").append(a);  // 修复firefox中无法触发clicka.click();$(a).remove();}}else{console.log("下载失败")}};// 发送ajax请求xhr.send(null)

2,图例

http://www.lryc.cn/news/166243.html

相关文章:

  • 深度学习面试八股文(2023.9.06)
  • Linux入门-网络基础|网络协议|OSI七层模型|TCP/IP五层模型|网络传输基本流程
  • docker系列(2) - 常用命令篇
  • Debian11安装MySQL8.0,链接Navicat
  • vue项目中使用特殊字体的步骤
  • 激光雷达检测负障碍物(附大概 C++ 代码)
  • 【每日一题】9.13 PING是怎么工作的?
  • 【Python百日进阶-Web开发-Peewee】Day279 - SQLite 扩展(四)
  • Postman接口压力测试 ---- Tests使用(断言)
  • nvue文件中@click.stop失效
  • 【微信小程序开发】宠物预约医疗项目实战-开发功能介绍
  • vue网页缓存页面与不缓存页面处理
  • AI系统论文阅读:SmartMoE
  • AD20多层板设计中的平电层设计规则
  • 压力测试有哪些评价指标
  • 简单 php结合WebUploader实现文件上传功能
  • Pandas数据分析一览-短期内快速学会数据分析指南(文末送书)
  • 应用程序分类与相关基本概念介绍
  • springcloude gateway的意义
  • 重新定义每天进步一点点
  • 代码随想录算法训练营第51天 | ● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费
  • 李佳琦掉粉,国货品牌却从“商战大剧”走向“情景喜剧”
  • linux 下 C++ 与三菱PLC 通过MC Qna3E 二进制 协议进行交互
  • Spring基础(2w字---学习总结版)
  • 07 目标检测-YOLO的基本原理详解
  • 每日一题 78子集(模板)
  • OpenCV之形态学操作
  • 设计模式:享元模式
  • 汉诺塔问题(包含了三台柱和四台柱)——C语言版本
  • 【实训项目】滴滴电竞APP