Axios IE 11问题，无法下载响应类型blob - 腾讯云开发者社区

需求：通过后端接口下载excel文件，后端没有文件地址，返回二进制流文件实现：axios(ajax类似) 主要代码： axios：设置返回数据格式为blob或者arraybuffer 如：...var instance = axios.creat({ ......vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型...(downloadElement); //下载完成移除元素　　window.URL.revokeObjectURL(href); //释放掉blob对象　}) ps：在下载的过程中，会有一个文件名的问题...;这里后端把它放到了header里面，但是axios的res.header并不能获取： ?

4.2K6 0

vue下载excel以及自适应表格宽度（前后端）

vue中下载excel流文件及设置下载文件名：https://segmentfault.com/a/11......axios .get(`/api/audit/export`, { responseType: "blob" //服务器响应的数据类型，可以是 'arraybuffer', 'blob...对象来处理数据，并设置文件类型 if (window.navigator.msSaveOrOpenBlob) { //兼容IE10 navigator.msSaveBlob...console.log(err); }); 方式二：使用 js-file-download 包 get 请求 axios .get(`后端接口链接`, { responseType: "blob...= 1; formData.value.pageSize = 200; axios .post(`后端接口链接`, formData.value, { responseType: "blob"

1.8K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端下载图片的N种方法

，跨域图片符合这个要求也可以下载，即使响应没有允许跨域的头，但是静态图片即使添加了这个头也是直接打开： // 经测试，浏览器仍然直接打开图片 app.use(express.static('....三.blob格式下载还是a标签，它还支持blob:协议的URL，利用这个可以把响应类型设置为blob，然后和base64一样扔给a标签： blob import axios from 'axios' export default {...Content-Disposition，否则浏览器也是直接打开图片，有该响应头的话跨域图片也可以下载，即使图片不允许跨域。...小结本文简单分析了一下前端下载图片的各种方式，各位可以根据实际需求进行选择，除了最后一种方法，其余方法均未在IE上测试，有需要的可以自行测试。

1K2 0

java下载word，解决文件名中文乱码的问题（包括edge跟ie11）

= agent.indexOf("like Gecko"))); /**旧版本ie直接判断MSIE即可，但是新版本ie跟edge使用了新的内核。msie判断无效，打印agent，先做截取处理。...**/ if(isMSIE){ System.out.println("----ie内核"); fileName...if(request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0) { // System.out.println("----ie

2251 0

如何根据后端返回的 url 下载 json 文件

设置请求的返回方式为 responseType = 'blob'，如果不设置可能会导致下载后无法正常打开。 2. 设置请求地址，请求方式，以及必要的请求头参数等，例如 token 等，可按需设置。...window.URL.revokeObjectURL(url) // 释放掉blob对象复制代码 tips：ie 并不支持直接下载 blob 资源，可以利用 window.navigator.msSaveOrOpenBlob...(blob, filename) 解决这个问题。...// 解决 ie 不支持下载 blob资源 if ('msSaveOrOpenBlob' in navigator) { window.navigator.msSaveOrOpenBlob(blob...下面是一个在 ie 执行下载 blob 的完整实例代码完整的 demo 示例 xhr 异步下载 json

4.8K10 0

Axios发送post请求下载文件

我想要实现用axios来发送post请求，然后服务器会返回的response是一个文件流，我希望能将这个文件流写入excel,从而实现该excel文件的下载。...form, // 参数 responseType: 'blob' // 表明返回服务器返回的数据类型 }) .then((res) => { //...fileName = '测试表格123.xls' if ('download' in document.createElement('a')) { // 非IE下载...+下载 navigator.msSaveBlob(blob, fileName) } }) } 这里用了Blob对象，上面的写法就是用从服务器接收到的文件流...（content-type:application/octet-stream）创建了一个blob对象，并使用该blob 创建一个指向类型数组的URL，将该url作为a标签的链接目标，然后去触发a标签的点击事件从而实现表格下载

3.3K3 0

IE10以下的IE浏览器在form表单提交、a标签等场景下，接收applicationjson类型的响应时，会提示是否要下载该json文件

IE10以下的IE浏览器并不支持application/json这种response格式，所以需要在服务端先将对象转成json字符串然后，设置Content-Type为text/html的类型，再返回，...如果你用的是springMVC，那么即使在controller层使用response对象设置了响应头信息，也是没有用的，因为如果你标识了@Responsebody注解，spring会自动根据你的返回值类型判断是否要给你将返回值转成某个视图对象...(具体根据你的springMVC的配置，一般是json)，如果配置的是json,那么就会自动返回application/json这种类型，解决方法如下： 1、去掉@Responsebody注解； 2、不要设置返回值

8591 0

前端怎么通过二进制流下载文件

后端返回二进制流，前端进行下载时，一般需要转成blob（Binary large Object），然后再进行下载。...': 'Bearer ' + getToken() } }).then(res => { resolveBlob(res, mimeMap[type]) })}/** - 解析blob响应内容并下载...- @param {*} res blob响应内容 - @param {String} mimeType MIME类型 */export function resolveBlob(res, mimeType...() document.body.appendChild(aLink)}可能出现的问题不设置responseType:blob，文件会下载，但是打不开；文件不能下载，报code:500 MIME类型设置错误...补充：前端axios设置了responseType:blob时，接收到数据就是blob，但是当文件导出失败时,返回的类型是json（为什么是json，后端异常处理一般都是response.setContentType

3551 0

15个项目中会常用到的 JS 工具函数代码

(content instanceof Blob)) { content = new Blob([content]) } const link = URL.createObjectURL...提供一个图片链接，点击下载图片、pdf等文件，浏览器会默认执行预览，不能调用download方法进行下载，需要先把图片、pdf等文件转成blob，再调用download方法进行下载，转换的方式是使用axios...请求对应的链接 //可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等 import axios from 'axios' //提供一个link，完成文件下载，link可以是 http:/...responseType: 'blob' //关键代码，让axios把响应改成blob }).then(res => { const link=URL.createObjectURL(res.data...en"> <meta http-equiv="X-UA-Compatible" content="<em>IE</em>

6094 0

16个工程必备的JavaScript代码片段（建议添加到项目中）

5472 0

Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a'...实现跨域下载并修改文件名(同样适用于URL地址) 方法 //通过文件下载url拿到对应的blob对象 getBlob(url) { return new Promise...('a')) { // 非IE下载 const elink = document.createElement('a') elink.download...} from '@/utils/request' //导入axios请求方法 request封装axios文件 export function exportFunc(url,parameter)...{ return axios({ url: url, method:'post' , data: parameter, responseType: 'blob'

6.4K2 0

前端下载二进制流文件

Blob、ajax(axios) mdn 上是这样介绍 Blob 的： Blob 对象表示一个不可变、原始数据的类文件对象。...最后发现是参数 responseType 的问题，responseType 它表示服务器响应的数据类型，由于后台返回来的是二进制数据，所以我们要把它设为 arraybuffer，接下来再看看结果是否正确...这次没有问题，文件能正常打开，内容也是正常的，不再是乱码。根据后台接口内容决定是否下载文件作者的项目有大量的页面都有下载文件的需求，而且这个需求还有点变态。...先来分析一下，首先根据上文，我们都知道下载文件的接口响应数据类型为 arraybuffer。返回的数据无论是二进制文件，还是 JSON 字符串，前端接收到的其实都是 arraybuffer。...具体实现如下： axios.interceptors.response.use(response => { const res = response.data // 判断响应数据类型是否

3K3 1

Axios是什么？用在什么场景？如何使用？

Axios特性 1、可以在浏览器中发送 XMLHttpRequests 2、可以在 node.js 发送 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据...Authorization`头 auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` 表示服务器响应的数据类型...，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // 默认的 //...可以说把请求这件事做到了极致，封装的很好用，目前下载次数：4,784,599次，github star：60,584次。...浏览器支持方法，除了IE低版本以外，最新版的浏览器都是支持的。

4.7K1 0

Axios POST 下载文件；HTTP GET下载文件

1.遇到的问题 1）通过Post下载文件，发现服务网关（Kestrel）不允许添加响应头（未解决）请求接口时候的配置： exportSchemeDetail(param) {...return axios.postHeader('/you-api/', param, { headers: { 'Content-Type':...'application/json-patch+json' }, responseType: 'blob' }); }, Axios...修改（这里是转载的，忘记是谁写的了~）： axios.interceptors.response.use( (response) => { window.app....;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型

1.1K2 0

前端下载文件的几种方式

前端下载文件的几种方式前言实习一个人负责一个管理系统的前端部分。其中，就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式，因为需要携带token。...= '/test.xlsx' } 无法重命名 window.open 打开指定的页面的URL 下载文件 function download() { window.open('/test.xlsx') } 无法重命名 axios 因为下载文件其实就相当于发起...因为是下载文件，所以响应类型应该是blob，用来存取二进制数据下载文件 function download...() { axios({ url: "/test.xlsx", method: 'GET', responseType: 'blob', // 用来存取二进制数据

4462 0

如何在前端下载后端返回的文件流时，获取请求头中的文件名称？

下面是一个示例代码：axios({ method: 'get', url: '/download', responseType: 'blob'}).then((response) => { const...responseType 参数设置为 blob，表示响应数据是二进制流。响应数据包含在 response.data 中，前端可以利用浏览器提供的 Blob 接口将文件流转换为下载链接。3....获取请求头中的文件名称后端返回文件流时，通常会在响应头中设置 Content-Disposition 实体头字段，用于指定文件名称、类型等信息。...在前端下载文件时，可以通过获取响应头中的 Content-Disposition 实体头字段，进而获取文件名称。...下面是一个示例代码：axios({ method: 'get', url: '/download', responseType: 'blob'}).then((response) => { const

6.3K0 1

文件下载的一些坑（IE 11，edge）angular2为例

首先前端发送一个get请求，后端返回application/octet-stream类型首先加一个responseType this.http.get(url, { withCredentials...= 0, Json = 1, ArrayBuffer = 2, Blob = 3, } 我这里是二进制流所以用3 返回之后处理下得到下载的链接 const blob1 = res.blob(); const...(url); document.getElementById('download').remove(); }); 但如果按这样会有兼容问题，IE无法触发下载。....后缀名 if (isIE) { // 兼容IE11无法触发下载的问题 navigator.msSaveBlob(res['blob'], name...不过在Safari的10以下版本还是无法触发下载，不知道还有没有其他的解决方案。

1.2K0 0

让浏览器下载文件的一些手段

IE ，这也是许多业务需求需要考虑的。...首先本不该将download设为true，download与disabled这种类型的属性值不同，它与文件名直接相关联。而且对于这种前后端响应式下载的方式，download 属性并不是必要的。 2....此时download无论如何都无法重置文件名。总结一下：未在响应头设置Content-Disposition信息（例如一般直接定位资源的同源URL），download属性可以重置文件名。...Blob（Binary Large Object）即二进制大对象，这个我们并不陌生，一些数据库将Blob用来表示存储二进制文件的字段类型。...download与浏览器特性紧密相关，目前该属性的兼容性也是一大问题，不过连微软官方都恳求用户不要再使用 IE ，相信以后download的兼容性问题会持续得到改善，应用前景也会越来越广阔。

9.3K2 0

前端vue 封装上传文件和下载文件的方法导入方法直接使用

目录标题 1、上传文件 2、下载文件 1、上传文件 upload.js import axios from 'axios' import { Message } from "element-ui";...}).then(response => { resolve(response) }).catch(error => { // 错误响应处理...'https://jiangsihan.cn/' //通过文件下载url拿到对应的blob对象 function getBlob(url) { return new Promise(resolve...　　js模拟点击a标签进行下载 function saveAs(blob, filename) { var link = document.createElement('a') link.href...* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式

2.8K1 0

前端文件下载汇总「案例讲解」

然后通过 .then(response => response.blob()) 将响应的数据转化为 Blob 对象。...上面两小节通过超链接下载和通过 Blob 下载都是自动调起浏览器下载，下载的进度浏览器进行反馈，文件小的时候浏览器会很快下载完并提示，但是文件很大的话，那么下载就很慢了，准确来说数据拉取很慢，点击之后页面很久才会响应...是否让用户知道数据加载到哪里了呢，加载完后浏览器吊起下载？需要解答上面这个问题，其实我们解决问题我们如何获取到文件加载的进度呢？即可。...数据的类型可以是 ArrayBuffer, Blob, Document, JS 对象，字符串等，这取决于 responseType 设置什么值 responseType 指定响应的类型。...({ method: 'get', url: '/download/file', responseType: 'blob', // 响应类型

2061 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

前端axios下载excel，并解决axios返回header无法获取所有数据的问题

vue下载excel以及自适应表格宽度（前后端）

前端下载图片的N种方法

java下载word，解决文件名中文乱码的问题（包括edge跟ie11）

如何根据后端返回的 url 下载 json 文件

Axios发送post请求下载文件

IE10以下的IE浏览器在form表单提交、a标签等场景下，接收applicationjson类型的响应时，会提示是否要下载该json文件

前端怎么通过二进制流下载文件

15个项目中会常用到的 JS 工具函数代码

16个工程必备的JavaScript代码片段（建议添加到项目中）

Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。

前端下载二进制流文件

Axios是什么？用在什么场景？如何使用？

Axios POST 下载文件；HTTP GET下载文件

前端下载文件的几种方式

如何在前端下载后端返回的文件流时，获取请求头中的文件名称？

文件下载的一些坑（IE 11，edge）angular2为例

让浏览器下载文件的一些手段

前端vue 封装上传文件和下载文件的方法导入方法直接使用

前端文件下载汇总「案例讲解」

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐