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

news2024/11/26 4:20:53

二进制流格式

 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.coloradmin.cn/o/746551.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火山引擎 DataLeap 构建Data Catalog系统的实践(二):技术与产品概览

技术与产品概览 架构设计 元数据的接入 元数据接入支持T1和近实时两种方式 上游系统:包括各类存储系统(比如Hive、 Clickhouse等)和业务系统(比如数据开发平台、数据质量平台等) 中间层: ETL Bridge&#x…

PCL点云处理之最小二乘直线拟合(❤❤❤亲测可用❤❤❤)(二百)

PCL点云处理之最小二乘直线拟合(❤❤❤亲测可用❤❤❤)(二百) 一、算法介绍二、具体代码1.代码2.结果一、算法介绍 点云近似于直线分布,但相对要散乱一些,此时,最小二乘直线拟合,是一种最常用的拟合方法,可以从中找到最优的直线方程,用于描述点云的分布情况。网上介…

Yjmstr的算法竞赛模板(updating)

YJMSTR的算法竞赛模板 目录 文章目录 YJMSTR的算法竞赛模板目录图论一、最短路1.spfa与负环、最短路1.1 bfs-spfa找负环:1.2 dfs-spfa找负环1.3 spfa求最短路的优化 2.dijkstra模板(set模拟二叉堆堆优化)2.1有向图最小环 3.Floyd求多源最短路/传递闭包/…

ARM Coresight 系列文章 7 - ARM Coresight 通过 AHB-AP 访问 cpu 内部 coresight 组件

文章目录 如下图所示,如果A78想去访问M33的内部 coresight 组件 ETM,需要要怎么做? 答案也正是在图中,首先A78 通过AXI 互联,接入到 APBIC 的 slave port,再通过APBIC 的 master 送出,而APBIC中…

【win11】将一个程序设置为开机启动

Windows 在 Windows 系统中,可以通过在 “启动” 文件夹中放置程序的快捷方式来实现开机启动。 按照以下步骤操作: 按 Win R 打开 “运行” 对话框,输入 shell:startup,然后按回车。这将打开 “启动” 文件夹。 找到你想设置…

自由视点合成中的表征学习(二)

三维重建以及神经渲染中的学习 公众号AI知识物语 本文内容为参加过去一次暑期课程学习时的笔记,浅浅记录下。 自由视点合成中的表征学习 目标:给定单一场景多个图片以及相机位子,生成新视角下的图像 挑战:恢复三维场景结构&…

Stable Diffusion (持续更新)

引言 本文的目的为记录stable diffusion的风格迁移,采用diffusers example中的text_to_image和textual_inversion目录 2023.7.11 收集了6张水墨画风格的图片,采用textual_inversion进行训练,以"The street of Paris, in the style of …

rabbitmq 开启 virtual host

由于我的rabbitmq架设在测试服务期。 导致我本地测试的mq消息,经常被服务器消费掉。 所以通过添加v-host,可以创建专属v-host域下的消息进行生产和消费。 一 新增用户 点击Admin,点击右边Users 输入Username Password ,并且Tags给与Admin权…

25 MFC 富文本

文章目录 ui 设置 使用AfxInitRichEdit2(); 初始化否则不显示 //初始化 BOOL CnotePadDlg::OnInitDialog() {CDialogEx::OnInitDialog();// 设置此对话框的图标。 当应用程序主窗口不是对话框时,框架将自动// 执行此操作SetIcon(m_hIcon, TRUE); // 设置大图标…

latex安装

工作环境下载一下,本来想偷懒,但是网站的编辑器实在是不太给力。 先安装TeX Live(网址:TeX Live - TeX Users Group (tug.org)) 然后等待一会:(路径最好不要有中文) 然后,等待:(很久) 嘻嘻&…

深度学习-图像分类篇二:注意力机制

图像处理中的注意力机制 Transformer&Self-Attention QKV原理 Self-Attention以及Multi-Head Attention Self-Attention 不同任务(李宏毅的注意力机制) 1.输入n输出n:sequence labeling2.输入n输出1:标签 -3. 输入n输出m…

渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?

在上篇文章中,我们介绍了渲染流水线中的 DOM 生成、样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染引擎之后,渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM;然后根据 …

JAVA8~17新特性

目录 一、前言 二、JAVA8 Lambda表达式 Stream API 创建方式 中间操作 终止操作 Optional类 三、JAVA9 模块机制 JShell交互式编程 接口 新增集合工厂方法 四、JAVA10 局部变量类型判断 五、JAVA11 Lambda表达式补充 String方法的补充 全新的HttpClient 使用 …

前端理解的HTTP缓存(作用、缓存策略、缓存控制机制、应用)

一、HTTP缓存有什么作用? 缓存是为了重复使用而被存储的,可以减少浏览器和服务器之间通信的次数、降低网络延迟、加速页面加载、提高用户体验性等。不但能使网页打开速度更快,还能减少服务器的压力。 二、 浏览器的缓存策略有哪些&#xff1…

关于SpringBoot、Nginx 请求参数包含 [] 特殊符号 返回400状态

问题来源: 使用RESTful风格发送带有特殊符号(如:点、大括号等)的请求,当使用Nginx做地址映射时会返回报"HTTP Status 400-Bad Request"的错误,这个时候我们需要对Nginx的映射方式做一下调整。 Nginx调整完发现跳转后又报…

Day42: 121. 买卖股票的最佳时机,122.买卖股票的最佳时机II

目录 121. 买卖股票的最佳时机 思路 122.买卖股票的最佳时机II 思路 121. 买卖股票的最佳时机 121. 买卖股票的最佳时机 - 力扣(LeetCode) 思路 1. 确定dp数组及其下标含义 dp[i][0] 表示第i天持有股票所得最多现金 dp[i][1] 表示第i天不持…

爷孙或者更深组件间传值

如图写法即可 父: provide() {return {errorMessage: this.refTable,}},子: inject: [errorMessage],

组合模式:构建树形结构的灵活设计

组合模式是一种结构型设计模式,它允许我们将对象组合成树形结构,以表示“部分-整体”的层次结构。本文将深入探讨组合模式的原理、结构和使用方法,并通过详细的 Java 示例代码来说明。 1. 组合模式的定义 组合模式是一种将对象组合成树形结…

Maven引入Jacoco插件后无法生成jacoco.exec执行文件

目录 jacoco.exec网上常见关于未生成jacoco.exec原因最终解决方案不生效原因解决方案 完整jacoco插件配置 jacoco.exec 执行数据文件,只有生成该文件,才表示引入插件jacoco成功生效 网上常见关于未生成jacoco.exec原因 网上找了一下解决方式基本都是…