vue 将后端返回的二进制流进行处理并实现下载

news2024/12/24 2:31:07

什么是二进制流文件?

二进制文件是一种计算机文件格式,它的数据以二进制形式存储,与文本文件不同。二进制文件可以包含任意类型的数据,例如图像、音频、视频、可执行文件、压缩文件等,而文本文件则仅仅包含 ASCII 码或其他编码的字符数据。

二进制文件的底层原理是将数据以二进制形式存储在文件中。在计算机中,所有的数据都是以二进制形式表示的,包括数字、字符、图像、音频、视频等。二进制文件通过按照特定的格式将这些二进制数据存储在文件中,以便在需要时能够正确地读取和使用。

二进制流常见的 Blob、ArrayBuffer、File、FileReader 和 FormData

二进制流长啥样?如下图:

获取二进制流文件的方法

/** 获取二进制流文件
 * @param url 请求地址
 * @param params 请求参数
 * @param method 请求方式,默认:'POST'
 * @param configType 设置响应类型
 * 'arraybuffer':设置响应类型为二进制对象(返回的是一个包含二进制数据的 JavaScript ArrayBuffer 类型化数组)
 * 'blob':设置响应类型为二进制对象(返回的是一个包含二进制数据的 Blob 对象)
 * @returns {Promise<void>} 请求结果
 */
async getBinaryFile(url, params, method = 'POST', configType = 'arraybuffer') {
  const headConfig = {
    responseType: configType // 设置响应类型
  }
  let res = {} // 请求结果
  switch (method.toLowerCase()) {
    case 'get':
      res = await axios.get(url, { params, ...headConfig }) // get 请求方式
      break
    case 'post':
      res = await axios.post(url, params, { ...headConfig }) // post 请求方式
      break
  }
  this.downloadBinaryFile(res.data, '项目介绍.txt') // 下载二进制文件
},

下载二进制流文件的方法

/** 下载二进制流文件
 * @param binFile 二进制文件流
 * @param fileName 文件名,例如:测试文本.txt
 * @param blobType Blob 对象的 type 属性给出文件的 MIME 类型,默认:'application/octet-stream'(用于通用二进制数据)
 */
downloadBinaryFile(binFile, fileName, blobType = 'application/octet-stream') {
  // 处理二进制数据并创建 Blob 对象
  const blobObj = new Blob([binFile], { type: blobType })
  // 创建一个链接并设置下载属性
  const downloadLink = document.createElement('a')
  let url = window.URL || window.webkitURL || window.moxURL // 兼容不同浏览器的 URL 对象
  url = url.createObjectURL(blobObj)
  downloadLink.href = url
  downloadLink.download = fileName // 设置下载的文件名
  // 将链接添加到 DOM 中,模拟点击
  document.body.appendChild(downloadLink)
  downloadLink.click()
  // 移除创建的链接和释放 URL 对象
  document.body.removeChild(downloadLink)
  window.URL.revokeObjectURL(url)
}

完整代码

在 Vue.js 中,可以通过使用 axios 或其他类似的 HTTP 库从后端获取二进制数据,并通过前端进行处理以实现文件下载。以下是一个简单的示例,使用 axios 和 Blob 对象来处理二进制数据。

首先,确保你的 Vue 项目中已经安装了 axios 网络请求库

npm install axios

然后,在你的 Vue 组件中,可以这样处理后端返回的二进制流

<!-- 下载二进制流文件 -->
<template>
  <div>
    <button @click="getBinaryFile('YOUR_BACKEND_API_ENDPOINT', { id: '' })">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    /** 获取二进制流文件
     * @param url 请求地址
     * @param params 请求参数
     * @param method 请求方式,默认:'POST'
     * @param configType 设置响应类型
     * 'arraybuffer':设置响应类型为二进制对象(返回的是一个包含二进制数据的 JavaScript ArrayBuffer 类型化数组)
     * 'blob':设置响应类型为二进制对象(返回的是一个包含二进制数据的 Blob 对象)
     * @returns {Promise<void>} 请求结果
     */
    async getBinaryFile(url, params, method = 'POST', configType = 'arraybuffer') {
      const headConfig = {
        responseType: configType // 设置响应类型
      }
      let res = {} // 请求结果
      switch (method.toLowerCase()) {
        case 'get':
          res = await axios.get(url, { params, ...headConfig }) // get 请求方式
          break
        case 'post':
          res = await axios.post(url, params, { ...headConfig }) // post 请求方式
          break
      }
      this.downloadBinaryFile(res.data, '项目介绍.txt') // 下载二进制文件
    },
    /** 下载二进制流文件
     * @param binFile 二进制文件流
     * @param fileName 文件名,例如:测试文本.txt
     * @param blobType Blob 对象的 type 属性给出文件的 MIME 类型,默认:'application/octet-stream'(用于通用二进制数据)
     */
    downloadBinaryFile(binFile, fileName, blobType = 'application/octet-stream') {
      // 处理二进制数据并创建 Blob 对象
      const blobObj = new Blob([binFile], { type: blobType })
      // 创建一个链接并设置下载属性
      const downloadLink = document.createElement('a')
      let url = window.URL || window.webkitURL || window.moxURL // 兼容不同浏览器的 URL 对象
      url = url.createObjectURL(blobObj)
      downloadLink.href = url
      downloadLink.download = fileName // 设置下载的文件名
      // 将链接添加到 DOM 中,模拟点击
      document.body.appendChild(downloadLink)
      downloadLink.click()
      // 移除创建的链接和释放 URL 对象
      document.body.removeChild(downloadLink)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

确保替换 `YOUR_BACKEND_API_ENDPOINT` 为你的后端API的实际地址,并设置适当的文件名。

这个例子中,我们使用了 axios 来获取后端返回的二进制数据,然后使用 Blob 对象创建一个包含该二进制数据的 Blob,最后创建一个下载链接并模拟点击以触发文件下载。

注意:浏览器的同源策略可能会限制跨域请求。如果你的前端和后端不在同一个域下,你可能需要在后端配置 CORS(跨域资源共享)来允许前端访问。

关于 Blob 的 content-type 的部分媒体类型

".*"="application/octet-stream"
".001"="application/x-001"
".301"="application/x-301"
".323"="text/h323"
".906"="application/x-906"
".907"="drawing/907"
".a11"="application/x-a11"
".acp"="audio/x-mei-aac"
".ai"="application/postscript"
".aif"="audio/aiff"
".aifc"="audio/aiff"
".aiff"="audio/aiff"
".anv"="application/x-anv"
".asa"="text/asa"
".asf"="video/x-ms-asf"
".asp"="text/asp"
".asx"="video/x-ms-asf"
".au"="audio/basic"
".avi"="video/avi"
".awf"="application/vnd.adobe.workflow"
".biz"="text/xml"
".bmp"="application/x-bmp"
".bot"="application/x-bot"
".c4t"="application/x-c4t"
".c90"="application/x-c90"
".cal"="application/x-cals"
".cat"="application/vnd.ms-pki.seccat"
".cdf"="application/x-netcdf"
".cdr"="application/x-cdr"
".cel"="application/x-cel"
".cer"="application/x-x509-ca-cert"
".cg4"="application/x-g4"
".cgm"="application/x-cgm"
".cit"="application/x-cit"

".doc"="application/msword"
".docx"="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
".rtf"="application/rtf"
".xls"="application/vnd.ms-excel application/x-excel"
".xlsx"="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
".ppt"="application/vnd.ms-powerpoint"
".pptx"="application/vnd.openxmlformats-officedocument.presentationml.presentation"
".pps"="application/vnd.ms-powerpoint"
".ppsx"="application/vnd.openxmlformats-officedocument.presentationml.slideshow"
".pdf"="application/pdf"
".swf"="application/x-shockwave-flash"
".dll"="application/x-msdownload"
".exe"="application/octet-stream"
".msi"="application/octet-stream"
".chm"="application/octet-stream"
".cab"="application/octet-stream"
".ocx"="application/octet-stream"
".rar"="application/octet-stream"
".tar"="application/x-tar"
".tgz"="application/x-compressed"
".zip"="application/x-zip-compressed"
".z"="application/x-compress"
".wav"="audio/wav"
".wma"="audio/x-ms-wma"
".wmv"="video/x-ms-wmv"
".mp3, .mp2, .mpe, .mpeg, .mpg"="audio/mpeg"
".rm"="application/vnd.rn-realmedia"
".mid, .midi, .rmi"="audio/mid"
".bmp"="image/bmp"
".gif"="image/gif"
".png"="image/png"
".tif, .tiff"="image/tiff"
".jpe, .jpeg, .jpg"="image/jpeg"
".txt"="text/plain"
".xml"="text/xml"
".html"="text/html"
".css"="text/css"
".js"="text/javascript"
".mht, .mhtml"="message/rfc822"

关于 responseType 的值

"" - 设为空字符串与设置为 "text" 相同,默认类型
"text" - 返回的是包含在 DOMString 对象中的文本
"document" - 返回的是一个 HTML Document 或 XML XMLDocument
"arraybuffer" - 返回的是一个包含二进制数据的 JavaScript ArrayBuffer
"blob" - 返回的是一个包含二进制数据的 Blob 对象
"json" - 返回的是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的
"ms-stream" - 返回的是下载流的一部分;此响应类型仅允许下载请求,并且仅受 Internet Explorer 支持

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

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

相关文章

<JavaEE> 网络编程 -- 网络通信基础(协议和协议分层、数据封装和分用)

目录 一、IP地址 1&#xff09;IP地址的概念 2&#xff09;IP地址的格式 二、端口号 1&#xff09;端口号的概念 2&#xff09;端口号的格式 3&#xff09;什么是知名端口号&#xff1f; 三、协议 1&#xff09;协议的概念 2&#xff09;协议的作用 3&#xff09;TC…

Python (八)网络编程

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

RT-Smart 官方 aarch64 平台 musl gcc 工具链下载

前言 RT-Smart 的开发离不开 musl gcc 工具链&#xff0c;用于编译 RT-Smart 内核与用户态应用程序 RT-Smart 当前的 musl gcc 工具链未开源&#xff0c;但可以下载到 官方 最新的 musl gcc 工具链 aarch64 平台 比如 RT-Smart 最好用的 qemu 平台&#xff1a; qemu-virt64-…

龙迅# LT9211C 是一款高性能转换器,可在 MIPI DSI/CSI-2、双端口 LVDS 和 TTL 之间进行互转换,分辨率高达4K30HZ。

1. 描述LT9211C 是一款高性能转换器&#xff0c;可在 MIPI DSI/CSI-2、双端口 LVDS 和 TTL 之间进行互转换&#xff0c;但 24 位 RGB TTL 到 24 位 RGB TTL 除外。不建议在 2 端口 10 位 LVDS 和 24 位 RGB TTL 之间进行转换。LT9211C对输入的MIPI/LVDS/TTL视频数据进行反串&am…

fl studio2024中文版下载安装教程 亲测有效

fl studio是一款功能强大的编曲软件&#xff0c;今天小编就为大家带来了详细的安装教程&#xff0c;需要的朋友一起看看吧&#xff01;fl studio2024是一款功能强大的编曲软件&#xff0c;也就是众所熟知的水果软件。它可以编曲、剪辑、录音、混音&#xff0c;让您的计算机成为…

【ProcessOn】流程图咏道图Axure自定义元件使用----含流程图案例

目录 一&#xff0c;ProcessOn 1.1 ProcessOn是什么 1.2 ProcessOn应用场景 1.3 流程图 1.4 泳道图简介 1.5 Process网址与界面简介 二&#xff0c;流程图案例 2.1 门诊流程图 2.2 住院流程图 2.3 药房药库流程图 2.4 会议OA流程图 三&#xff0c;Axure自定义元件 …

WPF Icon矢量库 MahApps.Metro.IconPacks

文章目录 前言MahApps.Metro.IconPacksIconPacks.Browser简单使用简单使用案例代码Icon版本个人推荐 Icon自定义版权问题 前言 为了更快的进行开发&#xff0c;我找到了一个WPF的矢量图库。这样我们就不用去网上找别人的矢量库了 MahApps.Metro.IconPacks MahApps.Metro.Icon…

手机笔记如何添加文件 在笔记中添加文件方法

在忙碌的工作和生活中&#xff0c;我经常需要记录一些重要的笔记&#xff0c;并且需要添加一些相关的文件以便查阅。但是&#xff0c;我发现很多笔记软件并不支持添加文件&#xff0c;这让我感到非常困扰。 有一次&#xff0c;我需要记录一个会议的重要内容&#xff0c;并且需…

【问题处理】—— lombok 的 @Data 大小写区分不敏感

问题描述 今天在项目本地编译的时候&#xff0c;发现有个很奇怪的问题&#xff0c;一直提示某位置找不到符号&#xff0c; 但是实际在Idea中显示确实正常的&#xff0c;一开始以为又是IDEA的故障&#xff0c;所以重启了IDEA&#xff0c;并执行了mvn clean然后重新编译。但是问…

VBA技术资料MF95:打开工作薄后自动定位某个工作表

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…

Linux:ELF

文章目录 前置知识从文本文件到可执行文件经历的阶段编译器gcc目标文件 ELFSection&#xff08;节&#xff09;Segment&#xff08;段&#xff09;从链接角度和从程序角度看ELF文件1. Section Header Table:2. Program Header Table: 参考 前置知识 从文本文件到可执行文件经历…

dockerfile,Docker镜像的创建

dockerfile&#xff1a;创建镜像&#xff0c;创建自定义的镜像。包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口。设置环境变量。 docker的创建镜像的方式&#xff1a; 1、基于已有镜像进行创建。根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起容…

3分钟打造私人微信ChatGPT助手:新手友好指南!

接上文&#xff1a; https://mp.weixin.qq.com/s/RCqX0rx7TEu1gIwHEBBWKQ 本文适用于小白用户&#xff0c;技术大佬勿入&#xff01; 前言 这里教大家如何快速的拥有一个属于自己的微信GPT助手 我个人其实不是这么部署的&#xff0c;但是为了方便小白用户&#xff0c;探索了一个…

python算法例17 下一个稀疏数

1. 问题描述 如果一个数是稀疏数&#xff0c;则它的二进制表示中没有相邻的1&#xff0c;例如5&#xff08;二进制表示为101&#xff09;是稀疏数&#xff0c;但是6&#xff08;二进制表示为110&#xff09;不是稀疏数&#xff0c;本例将给出一个n&#xff0c;找出大于或等于n…

记深圳盐田IBM X3550 m4服务器board故障维修一例

故障服务器型号&#xff1a;ibm system x3550 m4 服务器故障问题&#xff1a;无法开机 面板叹号黄灯&#xff0c;小面板board故障亮灯 响应时效&#xff1a;当天工程师带配件到现场检修并恢复操作系统和业务系统 维修过程&#xff1a;工程师经过与用户的交流中大致判定了故障…

Unity与Android交互通信系列(1)

运行于Android平台的原生App直接调用Android接口&#xff0c;可以享受近水楼台先得月的优势&#xff0c;而使用Unity开发的Android应用App则像是二等公民&#xff0c;使用Android原生功能特性就要麻烦得多&#xff0c;比如WiFi、蓝牙等&#xff0c;特别是一些高级功能特性&…

ArrayList集合的两个实例应用,有趣的洗牌算法与杨辉三角

本节课的内容&#xff0c;就让我们来学习一下ArrayList集合的应用&#xff0c;ArrayList的本质就是一个顺序表&#xff0c;那下面一起来学习吧 目录 一、杨辉三角 1.题目详情及链接 2.剖析题目 3.思路及代码 二、洗牌算法 1.创造牌对象 2.创造一副牌 3.洗牌操作 4.发…

大数据笔记(待续)

mysql 缓存技术 数据库和缓存双写数据一致性问题常见的解决方案 常见方案通常情况下&#xff0c;我们使用缓存的主要目的是为了提升查询的性能。大多数情况下&#xff0c;我们是这样使用缓存的&#xff1a; 用户请求过来之后&#xff0c;先查缓存有没有数据&#xff0c;如果有…

学习笔记 -- CAN系统基础

一、CAN物理层 一个双节点CAN网络示意图如下&#xff0c;两颗120Ω终端电阻并联呈现总线电阻60Ω。 A、B两个节点的CAN收发器&#xff08;Transceiver&#xff09;&#xff0c;只负责电平转换。当总线静默时&#xff0c;收发器内部的2.5V电源经15KΩ电阻把CAN-H和CAN-L都拉到2.…

前端(一):HTML+CSS

参考课程&#xff1a;23最新版web前端开发_哔哩哔哩_bilibili 文档&#xff1a;GitHub - codeNiuMa/HTML-md-file: 学习HTML课程时的资料 目录 1 HTML 1.1 骨架 DOCTYPE html标签 head标签 body标签 title标签 meta标签 1.2 标签标题h1 1.3 段落p 1.4 水平线 1.5 图片img 1.6 …