vue axios返回二进制流下载文件

最新推荐文章于 2024-07-02 15:34:32 发布
原创 最新推荐文章于 2024-07-02 15:34:32 发布 · 651 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

本文介绍了如何使用Axios从后台获取二进制流数据，并通过Blob对象和创建下载链接实现文件下载，重点展示了响应头设置和Blob处理技巧。

场景：axios请求后台，返回二进制流，下载excel文件

 代码

// 返回二进制流部分
let _res = res; // res就是返回的二进制流
let blob = new Blob([_res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = 'Data output'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
// 请求部分
在headers 里面加上responseType:'blob'

在vue中使用axios实现post方式获取二进制流下载文件
11-18
在VUE项目中，使用axios调用一个post接口获取二进制文件流。 第一步，在axios请求中设置参数，指定响应类型为blob，并将接收到的二进制数据流转换为目标文件格式。 下载前可以先看下教程 ...
精选资源
vue下载二进制流图片操作
01-21
1、应项目要求，后台返回二进制流，而且乱码 2、红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob...
axios 请求下载文件excel，后端返回二进制的文件
qq_37337830的博客
03-27 341
axios({ method: 'get', url: '', // 请求地址 data: '', // 参数 headers: { // 请求头 }, responseType: 'blob' // 表明返回服务器返回的数据类型 }) .then((res) => { // 处理返回的文件流 console.log(res,'---') const blob = res.data; const reader = new FileReader(.
vue 后端post请求返回二进制文件流 本地进行下载
weixin_45966674的博客
11-08 716
【代码】vue 后端post请求返回二进制文件流 本地进行下载。
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
12-13
需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) reader.onload = (e) => { let a = document.createE
vue前端 下载导出后台二进制文件流get、post
qq_39733791的博客
07-03 1654
借鉴：https://blog.youkuaiyun.com/Li_Ning21/article/details/121269436。
如何下载后台接口返回给我们的二进制数据文件(vue +axios)
热门推荐
chenhuaa123的博客
07-15 2万+
1.有时候,前端页面上需要展示后台接口返回给我们的一个二进制文件,比如图片,那么我们应该如何下载呢   js中有个Blob对象,一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。   2.创建Blob 对象   var debug ...
精选资源
vue+axios展示二进制文件流图片
01-20
总结，通过axios请求二进制文件流并在Vue组件中展示，主要涉及到对axios的配置、二进制数据的转换以及Vue响应式机制的应用。理解并掌握这些技术，可以让我们更好地处理服务器返回的各种类型的数据，提升前端应用的...
vue前端导出/下载表格使用Blob处理后台返回的二进制流数据
wxzs9999的博客
09-15 1072
功能：接口返回文件流，前端实现文件下载/导出功能。
Vue+axios下载二进制文件
w710537643的博客
03-02 744
【代码】Vue+axios下载二进制文件。
axios 二进制文件流的导出下载功能
tdjqqq的博客
05-12 547
文件导出，一般都是后台整合导出业务，最终给到前台一个URL，但是有时候会遇到二进制流。这时，应该在你的Axios中设置一下 【responseType: 'blob' // 表明返回服务器返回的数据类型】，并且下载的时候要用到方法 link.href = URL.createObjectURL(blob);即可 handleExport() { //导出 let _this = this _this.$http({ method: 'post', url: _this...
vue 下载文件（后台返回为二进制流）
weixin_44014451的博客
07-04 2067
将二进制流转换为需要的文件格式 downloadContent(value, name) { const link = document.createElement('a') const blob = new Blob([value], { type: 'application/octet-stream' }) const url = window.URL.createObjectURL(blob) link.href = url link
vue实现下载功能，处理后端返回的二进制文件流
Misnice的博客
08-06 1662
const content = res.data; //后端返回的数据 let url = window.URL.createObjectURL(content) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('id', 'dow...
导出excel
weixin_41434267的博客
10-28 890
import axios from 'axios' function Excels(data, filename) { const link = document.createElement('a') let blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'}) let objectUrl = URL.createObjectURL(blob) link.href = objectUrl l
Axios获取后端返回的二进制数据流并下载下来
蓝色之恋love的博客
08-27 2942
Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型，这里设置文件流blob的形式*/) .then(res => { let blob = new Blob([res.data], { type: 'application/xlsx;charset=utf-8'/*application/xlsx // 这里写要下载的文件格式;charset=utf-8*/ });
vue中使用axios获取后端导出文件二进制流，下载文件名为headers中属性content-disposition的文件
m0_61469263的博客
07-02 776
【代码】【无标题】
vue(二) vue中使用blob下载文件
风之子
08-02 2万+
1.post请求上传后对后端解析文件，然后下载 uploadSectionFile(param) { const self = this; //formData 为upload必须对象，默认接收的对象值 //eslint-disable-next-line const formData = new FormData(); fo...
vue后端二进制流数据前端处理下载和导出问题
qq_35451130的博客
07-14 694
前段时间写了一个管理后台，后台返回的二进制流数据，因为写url不太好捕捉错误，所以定的方案是前端接受后端返回的二进制流数据进行处理，，主要利用file-saver这个库，需要使用这个库的时候注意点如下，首先在import引入，import {savaAs} from “file-saver”； 在请求的时候设置响应头的数据，是blob数据，即responType为blob。，在headers设置content-type的类型，需要指定的类型是exl还是word，在then函数里面saveAs（new Blo
vue 二进制流 下载文件word
最新发布
01-04
### 实现 Vue 中通过二进制流下载 Word 文件 为了实现在 Vue 应用程序中通过二进制流下载 Word 文件，可以采用如下方法： 定义一个用于处理文件下载的方法，在此方法内部发送 HTTP 请求获取文件数据，并将其转换成浏览器能够识别的格式以便于触发下载行为。 ```javascript // 定义下载Word文档的方法 function downloadWordDocument() { axios({ url: &#39;/api/export-word&#39;, // 后端提供导出Word的服务地址 method: &#39;GET&#39;, responseType: &#39;blob&#39; // 设置响应的数据类型为Blob对象 }).then((response) => { const blob = new Blob([response.data], { type: &#39;application/msword&#39; }); // 创建Blob对象并指定MIME类型[^1] if (window.navigator && window.navigator.msSaveOrOpenBlob) { // 兼容IE浏览器 navigator.msSaveBlob(blob, "document.doc"); } else { var linkElement = document.createElement(&#39;a&#39;); linkElement.href = URL.createObjectURL(blob); linkElement.download = "document.doc"; // 设定下载后的文件名称 document.body.appendChild(linkElement); linkElement.click(); // 执行点击事件来启动下载过程 document.body.removeChild(linkElement); // 清理创建的<a>标签元素 } }); } ``` 上述代码展示了如何利用 `axios` 发起 GET 请求至服务器以获得 Word 文档的内容作为二进制流形式返回给客户端。当接收到响应之后，会依据不同的浏览器环境采取适当的方式让用户完成文件下载操作。 对于现代主流浏览器而言，通常的做法是构建一个新的 `<a>` HTML 锚点元素并将它的 `href` 属性设置为目标资源链接；同时设定好要保存下来的文件名字以及扩展名（这里设定了 `.doc`），最后模拟一次用户的点击动作从而激活实际的下载流程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值