vue后端二进制流数据前端处理下载和导出问题

最新推荐文章于 2024-05-26 23:44:38 发布
置顶 最新推荐文章于 2024-05-26 23:44:38 发布
阅读量611 收藏
点赞数
分类专栏： 遇到的问题 文章标签： web vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35451130/article/details/118732788
版权

前段时间写了一个管理后台，后台返回的二进制流数据，因为写url不太好捕捉错误，所以定的方案是前端接受后端返回的二进制流数据进行处理，，主要利用file-saver这个库，需要使用这个库的时候注意点如下，首先在import引入，import {savaAs} from “file-saver”；
在请求的时候设置响应头的数据，是blob数据，即responType为blob。，在headers设置content-type的类型，需要指定的类型是exl还是word，在then函数里面saveAs（new Blob（[返回的数据]）,文件名）

小码家
关注
专栏目录
Vue - 详细实现下载后端接口返回的二进制文件流，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流数据，前端实现点击下载功能）
王佳斌
12-08 1万+
vue，vue文件流对象下载，vue下载二进制文件流，下载二进制文件，vue调用接口获取二进制文件流如何下载到本地，下载图片图像excel word pdf ppt文件，vue后端返回二进制流-前端通过对象下载文件-图片，vue实现文件下载功能，vue下载二进制文件对象实现下载文件的超详细教程，vue使用new Blob()实现不同类型的文件下载功能，vue请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue使用下载流文件，vue获取后端的Blob文件流下载文件，vue通过blob下载流文件，vue下载
vue 下载文件（后台返回为二进制流）
weixin_44014451的博客
07-04 1989
将二进制流转换为需要的文件格式 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如何解析
u011295864的博客
01-18 3436
背景： 使用axios请求接口，返回的打印返回的数据，浏览器控制台显示乱码，而在preview里查看却是一张图片。 这时候应该怎么处理？ 放弃axios，使用XMLHttpRequest() 代码如下： html部分： <img :src="qrCodeSrc" /> js部分： let qrCodeUrl = '' // 要请求的接口地址 let xhr = new XMLHttpRequest() xhr.open('GET'.
vue数据流
weixin_43837268的博客
10-25 262
面试问 vue数据流 他不是问你双向绑定 你应该说 vue react 数据流 是单向 的 父--> 子 vue还有一个概念 是 v-model 在vue React中数据流向是单向的，由父节点流向子节点，如果父节点的props发生了改变，那么React会递归遍历整个组件 父组件通过绑定 props 的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过 event 的方式报告给父组件，由父组件本身决定改如何处理数据。 vue 另一个概念 .
【vue】将后端返回的二进制流前端进行处理实现下载文件
weixin_45184157的博客
07-15 4854
vue 项目，处理后端传过来的二进制流文件，实现下载功能
vue关于处理后端返回的blob二进制文件数据的方法
lyz246859的博客
08-10 3631
最近遇到开发下载表哥文件流的需求，才仔细回顾了下blob二进制流文件的特点和对应的处理方法，其实还是相当简单的，原理就是利用请求头中的responseType:‘blob’，去自动接受blob流文件，然后使用new Blob（）方法处理和后续下载，具体代码如下： const blob1 = new Blob([res]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层） //const blob = new
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
vue 导出二进制流文件
arthas0078的博客
11-10 1048
vue 导出二进制流文件
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
下载模版 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this....
如何下载后台接口返回给我们的二进制数据文件(vue +axios)
热门推荐
chenhuaa123的博客
07-15 2万+
1.有时候,前端页面上需要展示后台接口返回给我们的一个二进制文件,比如图片,那么我们应该如何下载呢   js中有个Blob对象,一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。   2.创建Blob 对象   var debug ...
vue实现二进制流文件导出excel
温小鹿的博客
08-16 612
问了一下其他的后端，他们公司前端是a标签，后端是给了一个地址，a标签或者window.open()都可以实现。 我们公司是后端返回的二进制流文件，实现了一下，亲测可以，没有问题 前端代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
vue后台返回二进制流文件导出
包子源的博客
04-23 1925
//导出接口 export function buildingExport() { return request({ url: '/building/excel/export', method: 'get', responseType: 'blob' //必须要加上，转为blob类型 }) } //导出方法 buildingExport().then(respo...
Vue----二进制文件导出
最新发布
m0_73590570的博客
05-26 178
这里使用saveAs 函数来触发文件下载。首先 先安装 file-saver 库。2.引入FileSaver.js库。
vue实现下载功能，处理后端返回的二进制文件流
Misnice的博客
08-06 1599
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...
vue axios返回二进制流下载文件
TO_Web的博客
07-12 559
场景：axios请求后台，返回二进制流，下载excel文件 代码
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 后端post请求返回二进制文件流 本地进行下载
weixin_45966674的博客
11-08 632
【代码】vue 后端post请求返回二进制文件流 本地进行下载。
前端接收二进制流的方式实现下载（get & post）
weixin_43660626的博客
12-19 1573
传送门 //请求头要设置这个： { responseType: 'blob' } 得到的二进制流传入下面的方法中即可完成下载 exportReport(data) { try { var blob = new Blob([data], { type: "application/vnd.ms-excel;charset=...
vue项目中关于二进制文件流导出Excel文件的一些坑
Gorgio_Liu的博客
07-29 2145
实现下载效果 <el-button type="warning" icon="el-icon-download" size="mini" @click="download()">导出</el-button> //下载操作 download() { return axios({ url: '/download/sms', method: 'post',
vue后端接收数据导出application/octet-stream
09-27
在Vue中，后端接收并导出application/octet-stream格式的数据可以通过以下步骤实现： 1. 在Vue组件中，使用axios或其他HTTP库发送请求到后端接口，并设置请求头的Content-Type为application/octet-stream。 2. 后端接收到该请求后，根据业务逻辑生成或获取需要导出的数据，并将其以流的形式写入HTTP响应。 3. 后端设置响应头的Content-Disposition为attachment，指定导出的文件名和文件类型。 4. 前端在接收到响应后，可以通过axios的responseType设置为blob来接收二进制数据。 5. 使用URL.createObjectURL方法将接收到的blob数据转换为可下载的链接。 6. 创建一个隐藏的a标签，将下载链接作为href属性，并设置download属性为要下载的文件名。 7. 使用JavaScript触发a标签的click事件，即可实现文件下载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值