Ajax 下载文件 文件被损坏
问题表现
Ajax 下载文件成功后,打开提示格式损坏,源代码如下:
axios({
method: 'get',
url: "/public/工作簿1.xlsx", // 静态资源地址
}).then(res => {
const href = document.querySelector('.href')
let blob = new Blob([res.data], { type: 'application/octet-stream'})
href.href = URL.createObjectURL(blob)
href.download = "xxx.xlsx"
href.click()
})
提示格式被损坏:
将 responseType 设置未 blob
或者 arraybuffer
即可:
axios({
method: 'get',
url: "/public/工作簿1.xlsx", // 静态资源地址
responseType: 'blob'
}).then(res => {
const href = document.querySelector('.href')
let blob = new Blob([res.data], { type: 'application/octet-stream'})
href.href = URL.createObjectURL(blob)
href.download = "xxx.xlsx"
href.click()
})
原因探索
responseType 的作用用于告诉浏览器,如何解析服务端返回的数据,需要保证客户端所设置的 responseType,能够解析服务端返回的内容类型( content-type),否则会导致格式解析错误,先看 responseType 所支持的类型:
类型 | 说明 |
---|---|
"" | responseType 为空字符串时,采用默认类型 DOMString,与设置为 text 相同 |
"arraybuffer" | response 是一个包含二进制数据的 JavaScript ArrayBuffer |
"blob" | response 是一个包含二进制数据的 Blob 对象 |
"document" | response 是一个 HTML Document 或 XML XMLDocument,这取决于接收到的数据的 MIME 类型。 |
"json" | response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。 |
"text" | response 是一个以 DOMString(UTF-16字符串) 对象表示的文本 |
当后台返回的数据是二进制数据流时,我们必须指定客户端也是以二进制流的方式去解析,否则无法获取到期望的结果。在上面的例子中,我们未设置 responseType
,所以默认的解析方式为 DOMString,导致数据不一致。
Ajax 下载文件 文件被损坏的更多相关文章
- ajax下载多文件,并且打包 C#中 ,文件批下载zip
//提交要下载的文件 $.ajax({ url:"/sub/ZipFile.aspx", data:"paras="+datas, type: 'HEAD', ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- php 通过header下载中文文件名 压缩包损坏或文件不存在的问题
开发中大家都是使用的utf8编码,昨天遇到一个奇坑,本是一件很小的问题,解决也浪费了个吧小时.废话不多说,植入正题: 文件下载方式:通过header二进制流文件下载需求: 文件上传保留文件名不变数据字 ...
- 用ajax下载字节流形式的excel文件
原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件. 解决方 ...
- 由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载,但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果。
由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文 ...
- 如何用ajax下载文件
引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...
- jQuery用FormData对象实现文件上传以及如何通过ajax下载文件
之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...
- 改成 否“依然报LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”问题的解决
LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 . 这个bug说实话,还是挺让人蛋疼的!!! 问题发生原因: 我这里能跑2013+opencv24 ...
- win7添加usb3.0驱动(错误代码1392,文件或目录损坏且无法读取)
Win7添加usb3.0驱动 之前一直按照网上的方法执行dism命令挂载时,总是失败,错误代码1392,显示原因是文件或目录损坏且无法读取.这个错误以前在装机时老是出现导致系统安装不成功,在BIOS中 ...
随机推荐
- 如何发布一个 npm 包
一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...
- php序列化和反序列化学习
1.什么是序列化 序列化说通俗点就是把一个对象变成可以传输的字符串. 1.举个例子,不知道大家知不知道json格式,这就是一种序列化,有可能就是通过array序列化而来的.而反序列化就是把那串可以传输 ...
- 【Storm】与Hadoop的区别
1)Storm用于实时计算,Hadoop用于离线计算. 2)Storm处理的数据保存在内存中,源源不断:Hadoop处理的数据保存在文件系统中,一批一批处 理. 3)Storm的数据通过网络传输进来: ...
- Java实现 LeetCode 836 矩形重叠(暴力)
836. 矩形重叠 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标. 如果相交的面积为正,则称两矩形重叠.需要明确的 ...
- Java实现 LeetCode 715 Range 模块(选范围)
715. Range 模块 Range 模块是跟踪数字范围的模块.你的任务是以一种有效的方式设计和实现以下接口. addRange(int left, int right) 添加半开区间 [left, ...
- Java实现 LeetCode 689 三个无重叠子数组的最大和(换方向筛选)
689. 三个无重叠子数组的最大和 给定数组 nums 由正整数组成,找到三个互不重叠的子数组的最大和. 每个子数组的长度为k,我们要使这3*k个项的和最大化. 返回每个区间起始索引的列表(索引从 0 ...
- Java实现 LeetCode 404 左叶子之和
404. 左叶子之和 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 /** * Definiti ...
- Java实现 基础算法 水仙花数
public class 水仙花数 { public static void main(String[] args) { for (int i = 100; i < 1000; i++) { i ...
- Java实现 蓝桥杯 历届试题 数字游戏
问题描述 栋栋正在和同学们玩一个数字游戏. 游戏的规则是这样的:栋栋和同学们一共n个人围坐在一圈.栋栋首先说出数字1.接下来,坐在栋栋左手边的同学要说下一个数字2.再下面的一个同学要从上一个同学说的数 ...
- 弄懂Java的自增变量
首先我们来看一段代码: public static void main(String[] args){ int i = 1; i = i++; //第一行 int j = i++; //第二行 int ...