【Vue】后端返回文件流,前端预览文件

 

let date;request({url: this.$route.query.url,method: 'get',responseType: 'blob',}).then(resp => {date = respthis.path = window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))}).catch((e) => {//旧版本浏览器下的blob创建对象window.BlobBuilder = window.BlobBuilder ||window.WebKitBlobBuilder ||window.MozBlobBuilder ||window.MSBlobBuilder;if (e.name == 'TypeError' && window.BlobBuilder) {if (date) {BlobBuilder.append(date);this.path = URL.createObjectURL(new BlobBuilder().getBlob("application/pdf"))}} else {console.log("浏览器版本较低,暂不支持该文件类型预览");}}).finally(() => {window.URL.revokeObjectURL(this.path);})
responseType必须设置为blob
  <iframe style="width: 100%;height: 500px" :src="path"></iframe>

文件预览效果

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

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

相关文章

中产医学产康AI智慧云发布会暨中产学院2024年度盛典圆满成功

【向光而行】中国医学产康AI智慧云服务平台发布会暨中产学院2024年度盛典 前言 开新局&#xff0c;迈新步&#xff0c;谋新篇&#xff0c;创新绩。中产医学产康AI智慧云服务平台发布会 暨中产学院2024年度盛典于2024年1月10日在郑州.涵唐酒店成功举办。本次年会以“【向光而行…

跟着cherno手搓游戏引擎【7】Input轮询

在引擎程序中任何时间&#xff0c;任何位置都能知道按键是否按下、鼠标的位置等等信息。 与事件系统的区别&#xff1a;事件系统是在按下时调用并传递按键状态&#xff1b;轮询是每时每刻都能获取按键状态 创建基类&#xff1a; YOTO/Input.h&#xff1a;名如其意 #pragma …

php反序列化之pop链构造(基于重庆橙子科技靶场)

常见魔术方法的触发 __construct() //创建类对象时调用 __destruct() //对象被销毁时触发 __call() //在对象中调用不可访问的方法时触发 __callStatic() //在静态方式中调用不可访问的方法时触发 __get() //调用类中不存在变量时触发&#xff08;找有连续箭头的…

wins安装paddle框架

一、安装 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/windows-pip.html 装包&#xff08;python 的版本是否满足要求&#xff1a; 3.8/3.9/3.10/3.11/3.12&#xff0c; pip 版本为 20.2.2 或更高版本 &#xff09; CPU 版:…

用VSCode玩STM32的烧录工具 CooCox Cortex Flash Programmer

一、下载软件 经热心兄弟推荐的版本&#xff0c;不知道有没有版权&#xff0c;如有版权问题&#xff0c;请通知删除。 CSDN - 0积分下载&#xff1a;https://download.csdn.net/download/qq_49053936/88744187 二、生成bin文件 插件不同&#xff0c;方法有所不同&#xff0c;各…

编写RedisUtil来操作Redis

目录 ​编辑 Redis中文网 第一步&#xff1a;建springboot项目 第二步&#xff1a;导依赖 第三步&#xff1a;启动类 第四步&#xff1a;yml 第五步&#xff1a;Redis配置类 第六步&#xff1a;测试类 第七步&#xff1a;编写工具类 RedisUtil 第八步&#xff1a;编写…

现代雷达车载应用——第3章 MIMO雷达技术 3.5节 汽车MIMO雷达的挑战

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 3.5 汽车MIMO雷达的挑战 在本节中&#xff0c;我们讨论了汽车MIMO雷达的设计挑战&#xff0c;包括多径反射存在时的测角、波形正交性和高效高分辨率角…

如何保证新加入的依赖版本与当前项目的其他相关依赖版本兼容?或者如何确保依赖版本升级后适合当前项目?或者如何保证新引入的依赖版本适合当前项目?

如何保证新加入的依赖版本与当前项目的其他相关依赖版本兼容&#xff1f;或者如何确保依赖版本升级后适合当前项目&#xff1f;或者如何保证新引入的依赖版本适合当前项目&#xff1f; 如题&#xff0c;可通过maven仓库找出各个版本之间的对应关系举例 如题&#xff0c;可通过m…

二阶构造设计模式

目录 构造函数回顾 深入思考 实验 构造函数的真相 半成品对象 引入二阶构造设计模式 设计理念 二阶构造设计模式图 二阶构造示例 完整demo 小结 构造函数回顾 类的构造函数用于对象的初始化。构造函数与类同名并且没有返回值。构造函数在对象定义时自动被调用 深入…

iphone 5s的充电时序原理图纸,iPAD充电讲解

上一篇写了iphone 5的时序。那是电池供电的开机时序。iphone 5s也是差不多的过程&#xff0c;不说了。现在看iphone5s手机充电时候的时序。iphone5s充电比iphone5充电简单了很多。 首先是usb接口接到手机上&#xff0c;usb线连接到J7接口上。J7接口不只是接usb&#xff0c;还能…

[bat批处理] 一键清理 Windows10 系统垃圾

文章目录 &#x1f680;使用批处理一键清理 Windows10 系统垃圾&#x1f528;编写批处理文件 &#x1f680;使用批处理文件&#x1f528;注意事项&#x1f680;总结 &#x1f680;使用批处理一键清理 Windows10 系统垃圾 Windows10 系统在使用过程中会产生大量的临时文件、日志…

基于YOLOv8深度学习的苹果叶片病害智能诊断系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

引领未来:话务数据展示大屏助力企业决策

在当今信息爆炸的时代&#xff0c;企业需要一个直观、高效的数据展示平台来帮助他们快速获取、分析和决策。山海鲸可视化话务数据展示大屏&#xff0c;就是这样一款引领企业迈向高效决策新纪元的产品。 一、什么是山海鲸可视化话务数据展示大屏&#xff1f; 山海鲸可视化是一款…

【不用找素材】ECS 游戏Demo制作教程(1) 1.15

一、项目设置 版本&#xff1a;2022.2.0f1 &#xff08;版本太低的话会安装不了ECS插件&#xff09; 模板选择3D URP 进来后移除URP&#xff08;因为并不是真的需要&#xff0c;但也不是完全不需要&#xff09; Name: com.unity.entities.graphics Version: 1.0.0-exp.8 点击…

HTML概述、基本语法(表格整理、标签、基本结构)

一、HTML概述 HTML指的是超文本标记语言 超文本&#xff1a;是指页面内可以包含图片、链接、声音、视频等内容 标记&#xff1a;标签&#xff08;通过标记符号来告诉浏览器页面该如何显示&#xff09; 我们可以打开浏览器&#xff0c;右击页面&#xff0c;点击查看网页源代码&…

Java队列-Disruptor 的使用

一、什么是 Disruptor 从功能上来看&#xff0c;Disruptor 是实现了“队列”的功能&#xff0c;而且是一个有界队列。那么它的应用场景自然就是“生产者-消费者”模型的应用场合了。 可以拿 JDK 的 BlockingQueue 做一个简单对比&#xff0c;以便更好地认识 Disruptor 是什么…

第二百六十九回

文章目录 概念介绍设置方法示例代码内容总结 我们在上一章回中介绍了Card Widget相关的内容&#xff0c;本章回中将介绍国际化设置.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在这里说的国际化设置是指在App设置相关操作&#xff0c;这样可以让不同国家的…

书生·浦语大模型--第二节课作业

书生浦语大模型--第二节课作业 基础部分生成300字小故事hugging face 下载功能 进阶部分浦语灵笔的图文理解及创作部署Lagent 工具调用 Demo 创作部署 基础部分 生成300字小故事 hugging face 下载功能 hugging face被墙了&#xff0c;在本地电脑无论是不是科学上网&#xff…

STM32 定时器输入捕获2——捕获高电平时长

由上图我们可以知道&#xff0c;高电平时间t2-t1。在代码中&#xff0c;可以记录此时t1的时间然后再记录t2的时间&#xff0c;t2-t1&#xff0c;就是我们所想要的答案。 但是&#xff0c;还有更简单一点点的&#xff0c;当到达t1的时候&#xff0c;我们把定时器清零&#xff0c…

现代工程科技杂志现代工程科技杂志社现代工程科技编辑部2023年第21期目录

能源科技 配网故障停电原因及改进对策研究 上官安琪 110kV变电站电气自动化技术及应用策略 陈祥 变电运维误操作事故预控措施分析 高翔;韦婉 智能变电站变电运维安全与设备维护探究 温亮亮;覃万全 110kV变电站电气设计及其防雷保护案例研析 谢旭平 变电运维…