首页 > 其他分享 >前端二进制文件转blob链接

前端二进制文件转blob链接

时间:2024-08-12 22:28:08浏览次数:11  
标签:文件 axios stream 二进制 blob data 链接

背景

有的时候后端返回文件,文件是属于stream类型(二进制格式),我们获取到二进制格式的文件后可能是需要下载,也直接在页面上预览等等。

代码


<template>
  <div class="app">
    <iframe
      :src="iframeSrc"
      scrolling="auto"
      style="border: 0; height: 100vh; width: 100vw"
    />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      iframeSrc: '',
    }
  },
  created() {
    // 该接口默认返回stream类型。
    // responseType: 指定响应结果为blob类型文件
    axios
      .get('http://127.0.0.1:3000/public/okdd1.pdf', {
        responseType: 'blob',
      })
      .then((res) => {
        const data = res.data
        // 将blob转blob地址
        const url = window.URL.createObjectURL(data)
        this.iframeSrc = url
      })
  },
}
</script>

<style lang="less" scoped></style>

效果

参考

https://blog.csdn.net/weixin_64317807/article/details/134446597

标签:文件,axios,stream,二进制,blob,data,链接
From: https://www.cnblogs.com/it774274680/p/18355851

相关文章

  • 帝国CMS跨表查询相关链接实现方法
    <?phpfunctionuser_OtherLink($tbname,$num,$ck){global$navinfor,$empire,$dbtbpre,$class_r;$ck=(int)$ck;if($ck==1||$ck==2){$tbname=$class_r[$navinfor[&#39;classid&#39;]][&#39;tbname&#39;];}$num=$num==&#39;&#39;?5:$......
  • C语言编译和链接超详解
    文章目录1.翻译环境和运行环境2.翻译环境2.1预处理(预编译)2.2编译2.2.1词法分析2.2.2语法分析2.2.3语义分析2.3汇编2.4链接3.运行环境1.翻译环境和运行环境在ANSIC的任何一种实现中,存在两个不同的环境。第1种是翻译环境,在这个环境中源代......
  • Kubernetes-二进制高可用部署v1.23.x
    目录高可用架构k8s集群组件ectdkube-apiserverkube-schedulerkube-controller-managerkubeletkube-proxykubectl高可用分析负载均衡节点设计1.环境准备1.1环境规划1.2所有节点配置host解析1.3安装必备工具1.4所有节点关闭防火墙、selinux、dnsmasq、swap1.5Master01节点免密......
  • windows开发工具说明:链接器link.exe 编译器cl.exe 资源编译器rc.exe
    路径说明C:\ProgramFiles(x86)\MicrosoftVisualStudio14.0\VC\bin这个路径指向的是MicrosoftVisualStudio2015(版本14.0)中包含的C++编译器及其相关的工具。这些工具包括编译器本身、链接器、资源编译器以及其他用于构建C++应用程序的实用程序。通常,这个目录下的......
  • Prometheus系列二进制部署
    Prometheus二进制部署官网下载prometheusDownload|Prometheus解压压缩包tar-zxvfprometheus-2.54.0.linux-amd64.tar.gz移动到安装路径下mv./prometheus-2.54.0.linux-amd64/usr/local/bin/prometheus创建启动用户(可选)sudouseradd-rs/bin/falseprometheu......
  • Linux:@2024-08-11 最新的Openssl-3.3.1 Openssh-9.8p1 Centos7上的编译后二进制 一键
     附件:Portable_Openssl-Openssh9.8p1-bin-el7.v1.4.1.tgz.zip 特点:适用于centos7.x 已经编译为二进制对老版本的关键二进制文件sshd、sftp、scp、openssl进行了备份升级前,自动打开一个端口为2222的老版本的sshd服务,你可以连接那个2222的服务,以防死翘翘。对sshd_confi......
  • 【经验分享】数据结构——哈希查找冲突处理方法(开放地址法-线性探测、平方探测、双散
    目录1.线性探测(LinearProbing)2.平方探测(QuadraticProbing)3.双散列探测(DoubleHashing)4.分离链接法(SeparateChaining)5.再散列(Rehashing)如何解答这些常见问题1.写出处理冲突的方法名称2.构造基于该处理冲突方法的哈希表3.求出该哈希表在等概率情况下查找成功......
  • Leetcode-3129 找出所有稳定的二进制数组I
    Leetcode-3129找出所有稳定的二进制数组I1.题目描述2.解题思路3.代码实现1.题目描述3129找出所有稳定的二进制数组I2.解题思路(1)定义f[i][j][k]表示i个0、j个1且当前位i+j填写值为k=0/1的所有情况;(2)对于f[i][0][0]、f[0][j][1]初始化为1,注意到:......
  • 动态链接库
    空间浪费是静态链接的一个问题,另一个问题是静态链接对程序的更新、部署和发布也会带来很多麻烦。比如程序Program1所使用的Lib.o是由一个第三方厂商提供的,当该厂商更新了Lib.o的时候(比如修正了lib.o里面包含的一个Bug),那么Program1的厂商就需要拿到最新版的Lib.o,然后将其与Program1......
  • 操作符详解(内含二进制与原、反、补码知识点)--还有超详细图解!一看就会!
    前言今天给大家分享一下C语言操作符的详解,但在此之前先铺垫一下二进制和进制转换与原码、反码、补码的知识点,都有详细的图解,也希望这篇文章能对大家有所帮助,大家多多支持呀!目录前言一、二进制和进制转换1.  10进制转化为10进制​2.  2进制转化为10进制 ​2.......