前端预览、下载二进制文件流(png、pdf)

前端请求设置 responseType: “blob”

后台接口返回的文件流如下:
在这里插入图片描述
在这里插入图片描述

拿到后端返回的文件流后:
预览

<iframe  :src="previewUrl" frameborder="0" style="width: 500px; height: 500px;"></iframe>

1、预览

view(data) {// 文件类型            let fileType = this.fileName.slice(this.fileName.length - 3).toUpperCase();let myBlob = '';//不同文件类型设置不同的type            if (fileType == 'PDF') {myBlob = new window.Blob([data], { type: 'application/pdf' });} else {myBlob = new window.Blob([data], { type: 'image/png' });}const previewUrl = window.URL.createObjectURL(myBlob);this.previewUrl = previewUrl;// iframe预览// window.open(previewUrl, '_blank');// 浏览器新打开窗口        
},

2、下载

// 下载        
downFile() {var data = this.fileData;var fileType = this.fileName.slice(this.fileName.length - 3).toUpperCase();var blob = "";if (fileType == 'PDF') {blob = new window.Blob([data], { type: 'application/pdf' });} else if (fileType == 'PNG') {blob = new window.Blob([data], { type: 'image/png' });}const a = document.createElement("a");const objectUrl = URL.createObjectURL(blob);a.setAttribute("href", objectUrl);a.setAttribute("download", this.fileName);a.click();URL.revokeObjectURL(a.href); // 释放url        
}

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

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

相关文章

理解http中cookie!C/C++实现网络的HTTP cookie

HTTP嗅探&#xff08;HTTP Sniffing&#xff09;是一种网络监控技术&#xff0c;通过截获并分析网络上传输的HTTP数据包来获取敏感信息或进行攻击。其中&#xff0c;嗅探器&#xff08;Sniffer&#xff09;是一种用于嗅探HTTP流量的工具。 在HTTP嗅探中&#xff0c;cookie是一…

Python —— 接口自动化(1)

1、接口测试的基础概述 1、接口测试的方式 1、主流的工具类型 - jmeter,postman,apifox,fastapi,apipost.... 2、公开的自动化平台 - metersphere,yapi.... 3、公司内部自研平台 - 4、全面使用代码自己去完成框架搭建&#xff0c;项目实战.... 不论是平台还是工具&#xff0…

【Redis】Redis性能优化:理解与使用Redis Pipeline

原创不易&#xff0c;注重版权。转载请注明原作者和原文链接 文章目录 Pipeline介绍原生批命令(MSET, MGET) VS PipelinePipeline的优缺点一些疑问Pipeline代码实现 当我们谈论Redis数据处理和存储的优化方法时&#xff0c;「 Redis Pipeline」无疑是一个不能忽视的重要技术。…

Transformer预测 | Pytorch实现基于Transformer的时间序列预测(含单步与多步实验)

文章目录 效果一览文章概述模型描述程序设计单步实验多步实验参考资料效果一览 文章概述 Transformer预测 | Pytorch实现基于Transformer的时间序列预测(含单步与多步实验) Transformer-singlestep.py 包含单步预测模型 Transformer-multistep.py 包含多步预测模型 这是单步预…

基于ChatGPT+词向量/词嵌入实现相似商品推荐系统

最近一个项目有个业务场景是相似商品推荐&#xff0c;给一个商品描述(比如 WIENER A/B 7IN 5/LB FZN )&#xff0c;系统给出商品库中最相似的TOP 5种商品&#xff0c;这种单纯的推荐系统用词向量就可以实现&#xff0c;不过&#xff0c;这个项目特点是商品库巨大&#xff0c;有…

Python爬虫(二十二)_selenium案例:模拟登陆豆瓣

本篇博客主要用于介绍如何使用seleniumphantomJS模拟登陆豆瓣&#xff0c;没有考虑验证码的问题&#xff0c;更多内容&#xff0c;请参考&#xff1a;Python学习指南 #-*- coding:utf-8 -*-from selenium import webdriver from selenium.webdriver.common.keys import Keysimp…

材质、纹理、贴图的区别和关联

1、材质、纹理、贴图的概念 材质&#xff08;Material&#xff09;、纹理&#xff08;Texture&#xff09;、贴图&#xff08;Texture Map&#xff09;是计算机图形学中的三个概念&#xff0c;它们之间存在关系但也有一些区别。 材质&#xff08;Material&#xff09;是描述物…

[leetcode 优先队列] 2512. 奖励最顶尖的 K 名学生 M

给你两个字符串数组 positive_feedback 和 negative_feedback &#xff0c;分别包含表示正面的和负面的词汇。不会 有单词同时是正面的和负面的。 一开始&#xff0c;每位学生分数为 0 。每个正面的单词会给学生的分数 加 3 分&#xff0c;每个负面的词会给学生的分数 减 1 分…

算法进阶——字符串的排列

题目 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数据范围&#xff1a;n<10 要求&#xff1a;空间复…

pytorch 训练、微调YOLOv5,YOLOv8 小技巧 合集

文章大纲 前置文章训练过程中:基于多核CPU的加速其他AI 加速器参考文献与学习路径前置文章 yolo v5 坐标相关的判断与转换,评价指标,训练结果解析YOLOv8 多目标跟踪与常见问题汇总python + pytorch 多线程实现级联模型的业务逻辑yolov5 奇奇怪怪的错误汇总:【版本兼容,模型…

设计模式 - 中介者模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 中介者模式又叫调停模式&#xff0c;定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 中介者模式可以使对象之间的关系数量急剧减少&#xff0…

nginx开启https配置之后网页无法访问问题处理

背景说明 最近新购服务器部署nginx之后按照之前的方式部署前端项目并配置https之后访问页面显示:无法访问.新的服务器ECS系统和之前相同,nginx安装方式也相同,nginx配置方式也是相同.但是访问还是显示无法访问.下面简单记录一下问题处理过程. 处理过程 1.https访问之后无法访问…

uniapp中videojs、renderjs的使用

在uniapp中使用了某些前端库或iframe&#xff0c;需要操作这些库中的dom的时候&#xff0c; 而uni上又没有document等基础对象。也就无法操作这些dom去实现一些交互逻辑&#xff0c;那么&#xff0c;涉及到这些的前端类库就无法使用&#xff0c;例如html2、canvas、image、vide…

php+html+js+ajax实现文件上传

phphtmljsajax实现文件上传 目录 一、表单单文件上传 1、上传页面 2、接受文件上传php 二、表单多文件上传 1、上传页面 2、接受文件上传php 三、表单异步xhr文件上传 1、上传页面 2、接受文件上传php 四、表单异步ajax文件上传 1、上传页面 2、接受文件上传ph…

Day-08 基于 Docker安装 Nginx 镜像-负载均衡

1、反向代理后&#xff0c;自然而然就引出了负载均衡,下面简单实现负载均衡的效果; 2、实现该效果需要再添加一个 Nginx &#xff0c;所以要增加一个文件夹。 /home|---mutou|----nginx|----conf.d|----html|----conf.d2|----html3 1.创建 html3 文件夹&#xff0c; 新建 index…

CART 算法——决策树

目录 1.CART的生成&#xff1a; &#xff08;1&#xff09;回归树的生成 &#xff08;2&#xff09;分类树的生成 ①基尼指数 ②算法步骤 2.CART剪枝&#xff1a; &#xff08;1&#xff09;损失函数 &#xff08;2&#xff09;算法步骤&#xff1a; CART是英文“class…

gitlab git lfs的替代软件整理汇总及分析

文章目录 前言替代软件分析git-annexgit-fatgit-symgit-meida 总结 前言 git-lfs科普 Git LFS&#xff08;Large File Storage&#xff09;是一个Git扩展&#xff0c;用于管理大型文件。Git LFS通过将大型文件存储在Git仓库之外&#xff0c;从而加快了Git操作的速度。它使用指…

新的“HTTP/2 Rapid Reset”0day攻击打破了DDoS记录

导语 最近&#xff0c;一种名为“HTTP/2 Rapid Reset”的DDoS&#xff08;分布式拒绝服务&#xff09;攻击技术成为了热门话题&#xff0c;该技术自8月份以来被积极利用作为零日漏洞&#xff0c;打破了以往的攻击记录。亚马逊网络服务&#xff08;Amazon Web Services&#xff…

C#的值类型和引用类型

不得不说c#的类型系统设计有点意思&#xff0c;不同的编程语言对于类型的设计各有取舍。 值类型&#xff1a; 当我们将一个int类型的值赋值到另一个int类型的值时&#xff0c;它实际上是创建了一个完全不同的副本。换句话说&#xff0c;如果你改变了其中某一个的值&#xff0…

短视频账号矩阵系统源码saas===独立部署

前言&#xff1a; 短视频账号矩阵是指在不同的短视频平台上&#xff0c;一个个人或企业所拥有的账号数量和分布情况。由于不同的短视频平台受众人群和内容类型等因素不同&#xff0c;因此拥有更多账号可以在更广泛的受众中传播内容&#xff0c;提高曝光度和流量。短视频账号矩阵…