前端处理后端返回的文件流,进行文件下载

二进制流格式

 Blob格式

前言:

        需求:根据后端接口返回的文件流进行数据处理,并实现文件的下载,且下载文件为word文档.

代码实现:

//下载文件
async function DownLoadFile(row) {let res = await DownLoadFileAPI(row.id);const blobURL = window.URL.createObjectURL( //进行格式处理,把后端返回的二进制流转成Blob;type 规定下载文件的格式new Blob([res.data], { type: "application/msword" }));const tempLink = document.createElement("a");(tempLink.style.display = "none"), (tempLink.href = blobURL);tempLink.setAttribute("download", row.filename);document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);window.URL.revokeObjectURL(blobURL);
}

 知识点补充:

        1、new Blob(blobParts, options);

         type的常见类型

扩展名文件类型MIME类型
.docMicrosoft Wordapplication/msword
.jpeg/.jpgJPEG 图片image/jpeg
.mp3MP3 音频audio/mpeg
.pdfPDFapplication/pdf
.xlsMicrosoft Excelapplication/vnd.ms-excel
.zipZIPapplication/zip

           查看更多:Media Types

        2、格式转化

        二进制流转blob

const blob = new Blob([BufferSource],{type:type})

        blob转base64

BlobToBase64(blob,cb){const fileReader = new FileReader()fileReader.onload = function(e){cb(e.target.result)}fileReader.readAsDataURL(blob)
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/19793.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标检测学习

目录 1、目标定位 2、特征点检测 3、目标检测 4、滑动窗口的卷积实现 5、Bounding Box 预测(Bounding box predictions) 6、交并化 7、非极大值抑制 8、Anchor Boxes 9、YOLO算法 1、目标定位 2、特征点检测 如何检测特征点(以人的部…

【UE4 C++】根据指定路径生成静态网格体

在上一篇博客中(【UE C】蓝图调用C函数),我们用C创建了一个蓝图函数库,本篇文章在这个蓝图函数库基础上增加一个方法,该方法只需输入一个文件目录路径,就可在场景中生成该目录下得所有静态网格体。&#xf…

ChatGPT对高校人才培养模式的挑战与应对策略思考

酷吗?输入指令后直接就能生成一大串代码,即使不懂相关技术也能玩转编程,这就是ChatGPT赋予你的“新能力”,除了写代码,ChatGPT还能帮你执行各种五花八门的任务。 AI工具如ChatGPT在行业中的广泛应用对于行业的人才结…

解密Sketch文件打开秘籍:简单两步操作!

虽然Figma,sketch,xd都很好用,但是设计师在设计工作流中经常会遇到无法在这三者软件中自由导入导出的情况。但是只要我们转变一下思路,因为这三种软件都支持导入sketch格式,所以我们只要将文件格式转成sketch,就能自由的在不同软件…

【华为鸿蒙3.0/荣耀安卓12使用VMOS Pro的激活方式】

关于华为鸿蒙3.0/荣耀安卓12如何解除进程限制,这里提供以下教程供小伙伴们参考。 需要准备:电脑一台,数据线一根。 第一步:打开手机USB调试模式。 确保USB数据线已连接手机和电脑,打开手机“开发者选项”&#xff0…

【Distributed】zookeeper+kafka的应用及部署

文章目录 一、zookeeper1. zookeeper的概述1.1 Zookeeper 定义1.2 Zookeeper 工作机制1.3 Zookeeper 特点1.4 Zookeeper 数据结构1.5 Zookeeper 应用场景1.6 Zookeeper 选举机制第一次启动选举机制非第一次启动选举机制选举Leader规则 2. 部署 Zookeeper 集群2.1 安装前准备2.2…

HarmonyOS学习路之开发篇—流转(多端协同 一)

多端协同开发 场景介绍 开发者在应用FA中通过调用流转任务管理服务、分布式任务调度的接口,实现多端协同。 主要流程如下: 设备A上的应用FA向流转任务管理服务注册一个流转回调。 Alt1-系统推荐流转:系统感知周边有可用设备后,主…

onvif库封装及qt工程调用onvif库实现设备搜索、获取码流地址等功能

一、前言: 本篇的OnvifManager工程是在vs2010下进行开发编译,它实现了对onvif库的封装调用,目前工程接口实现了对onvif的搜索、码流地址获取、设备重启接口,其他接口后续可以通过更改工程代码进行添加。qt工程myonvif是对OnvifMan…

uniapp uni实人认证

uni实人认证依赖 目前仅支持App平台。 h5端活体人脸检测,使用的是百度云的h5人脸实名认证 使用要求 1、app端 在使用前,请确保您已注册DCloud账号,并已完成实名认证。 然后需要按文档开通服务 业务开通 | uni-app官网 2、h5端 在使用前…

vue3向对象中添加属性

使用场景:后端返回一个数组对象结构,会出现可能需要前端自己向对象中添加一个新的字段 在vue2中我们常常会遇到明明已经改变了数据,视图却没有实时更新这样的问题 这时vue2就提供了一个方法就是$set this.$set(this.userInfo, age, 12)但是在…

从0到1:垃圾上门回收预约小程序开发笔记

背景 用户可以随时随地进行垃圾上门回收的预约,无需到实体店或打电话预约,节省了时间和精力,回收服务的便利性和高效性,可以提高居民的生活质量,减少垃圾对生活环境的影响 功能规划 垃圾上门回收预约:用…

Shell的条件运算语句

目录 IF语句 单分支语句语法语法 多分支结构语法 CASE语句 语法 IF语句 单分支语句语法语法 #写法1 if 条件语句 then内容 fi#写法2 if 条件语句 ;then内容 fi编写一个内容警报器的例子 #!/bin/bash free_mem$(free -m | grep "Mem:" | tr -s " "…