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

news2024/10/6 11:51:48

 

let date;
        request({
          url: this.$route.query.url,
          method: 'get',
          responseType: 'blob',
        }).then(resp => {
          date = resp
          this.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.coloradmin.cn/o/1390915.html

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

相关文章

2019年认证杯SPSSPRO杯数学建模C题(第二阶段)保险业的数字化变革全过程文档及程序

2019年认证杯SPSSPRO杯数学建模 基于统计建模的车险业数字变革研究 C题 保险业的数字化变革 原题再现&#xff1a; 车险&#xff0c;即机动车辆保险。保险自身是一种分散风险、消化损失的经济补偿制度&#xff0c;车险即为分散机动车辆在行驶过程中可能发作的未知风险和损失…

基于无人机的消防灭火系统设计

摘要&#xff1a;人类社会的进步&#xff0c;使火灾变得更加频繁且越来越复杂&#xff0c;随着这些年无人机技术的发展&#xff0c;将无人机技术融入消防灭火逐渐变成必然。消防救援采用无人机主要有以下几点原因&#xff1a;一、对火场及火场周围环境信息十分匮乏&#xff0c;…

CUDA tips

命令行查看核函数消耗的寄存器和共享内存数量 nvcc --ptxas-options-v reduce_sum.cu nvprof 使用 由于 8.0 及以上计算能力的显卡用不了 nvprof&#xff0c;官方建议用 nsight system 和 ncu&#xff0c;但是如果只想命令行打印表格查看 kernel 概况感觉还是 nvprof 方便&am…

.Net Core 使用 AspNetCoreRateLimit 实现限流

上一篇文章介绍过ASP.NET Core 的 Web Api 实现限流 中间件-CSDN博客 使用.NET 7 自带的中间件 Microsoft.AspNetCore.RateLimiting 可以实现简单的Api限流&#xff0c;但是这个.NET 7以后才集成的中间件&#xff0c;如果你使用的是早期版本的.NET&#xff0c;可以使用第三方库…

「解析」Jetson配置 git服务

这两天感冒了在家休养&#xff0c;想着把之前买的 Jetson 开发板用起来&#xff0c;买Jetson的初衷就是用来学习Linux系统&#xff0c;顺道可以部署算法&#xff0c;以及一些其他需求&#xff0c;相比树莓派而言&#xff0c;Jetson开发相对更贵&#xff0c;但是其配备了英伟达的…

科研绘图(五)玫瑰图

柱状图的高级平替可视化 “玫瑰图”&#xff0c;通常也被称为“科克斯图”。它类似于饼图&#xff0c;但不同之处在于每个部分&#xff08;或“花瓣”&#xff09;的角度相同&#xff0c;半径根据它表示的值而变化。这种可视化工具对于周期性地显示信息非常有用&#xff0c;比…

log4j2漏洞综合利用_CVE-2021-44228_CNVD-2021-95919

1.漏洞利用 1.1.rmi 利用 1、在检测到目标存在 log4j2 漏洞后&#xff0c;确定漏洞参数&#xff0c;尝试接受目标 rmi 请求。 成功接收到请求。 出现 JRMIK 字样即代表可接受 RMI 请求。 2、漏洞利用。 使用JNDI-Injection-Exploit-1.0-SNAPSHOT-all.jar执行命令&#xff0…

SAP 销售订单审批状态(查询/修改)

销售订单审批状态启用后&#xff0c;前端显示界面如下图 销售订单审批状态读取&#xff1a;STATUS_READ 销售订单审批状态修改&#xff1a;I_CHANGE_STATUS 销售订单审批状态读取 代码样例如下&#xff1a; DATA: lv_objnr TYPE vbak-objnr,lv_objnr_t TYPE jsto-objnr,l…

区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测

区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测 目录 区间预测 | Matlab实现BiLSTM-Adaboost-ABKDE的集成双向长短期记忆网络自适应带宽核密度估计多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 …

soso移动营业大厅(纯后端+MySQL数据库+JDBC)

一、项目需求 中国移动,中国联通,中国电信是国内3大通信运营商,每个运营商都提供了不同的品牌套餐来应对不同的用户群,比如北京移动主要有全球通,神州行,动感地带等3大品牌套餐,每种套餐的内容和费用不同,嗖嗖移动是一个假定的通信运营商,提供了话痨套餐,网虫套餐,超人套餐,各…

ElasticSearch入门篇

目录 一、 ElasticSearch的定位 二、 什么是倒排索引 三、 什么是全文检索 四、 ElasticSearch的数据存储原理 4.1 ElasticSearch与关系型数据库的数据结构对比 4.2 ElasticSearch的倒排索引原理 一、 ElasticSearch的定位 ElasticSearch是一款开源的分布式 搜索和…

【Linux终端工具】Tmux的使用教程,如何正确使用Tmux

文章目录 入门tmux什么是tmux&#xff1f;安装tmux快速启动tmux基本操作入门1. 分离与退出2. 帮助信息3. 新建会话4. 重新接入会话5. 窗格操作 进阶操作1. 会话管理2. 切换窗口3. 窗格间切换 总结 入门tmux 什么是tmux&#xff1f; tmux是一款终端复用器&#xff0c;它允许你…

一、ArcGIS Pro SDK for Microsoft .NET 开发环境配置

ArcGIS Pro二次开发需要的工具&#xff1a; 1.Visual Studio 2.ArcGIS Pro SDK 一、Visual Studio安装 经过查阅资料&#xff0c;ArcGIS Pro3.0版本需要安装Visual Studio2022版&#xff0c;因为只有22版的才会有有ArcGIS Pro3.0以上版对应ArcGIS Pro SDK&#xff0c;因此&…

MySQL核心SQL

一.结构化查询语言 SQL是结构化查询语言&#xff08;Structure Query Language&#xff09;&#xff0c;它是关系型数据库的通用语言。 SQL 主要可以划分为以下 3 个类别&#xff1a; DDL&#xff08;Data Definition Languages&#xff09;语句 数据定义语言&#xff0c;这…

通过Canal实现缓存同步

文章目录 1.数据同步策略2.初始Canal3.安装Canal4.监听Canal 1.数据同步策略 2.初始Canal 3.安装Canal 见文章安装Canal详情 4.监听Canal

【Web】websocket应用的是哪个协议

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Web ⛳️ 功不唐捐&#xff0c;玉汝于成 前言 在当今互联网时代&#xff0c;实时性和即时通讯成为网络应用日益重要的一部分。WebSocket 协议作为一种创新性的通信协议&#xff0c;极大地改善了…

网页设计(八)HTML5基础与CSS3应用

一、当当网企业用户注册页面设计 当当网企业用户注册页面 改版后当当网企业用户注册页面 <!-- prj_8_1.html --> <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>当当网企业用户注册页面设计</title><s…

圈小猫游戏HTML源码

源码介绍 圈小猫游戏html源码&#xff0c;HTMLCSSJS,记事本可以打开修改内容&#xff0c;电脑本地双击index.html即可运行&#xff0c;也可以上传到服务器上面运行&#xff0c;喜欢的同学可以拿去使用 下载地址 蓝奏云&#xff1a;https://wfr.lanzout.com/iFkVc1lb5akj CS…

【MATLAB源码-第113期】基于matlab的孔雀优化算法(POA)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 POA&#xff08;孔雀优化算法&#xff09;是一种基于孔雀羽毛开屏行为启发的优化算法。这种算法模仿孔雀通过展开其色彩斑斓的尾羽来吸引雌性的自然行为。在算法中&#xff0c;每个孔雀代表一个潜在的解决方案&#xff0c;而…

NFS(Network File System 网络文件服务)

一&#xff0c;nfs 简介 1&#xff0c;nfs 性质 NFS&#xff08;Network File System 网络文件服务&#xff09; 文件系统&#xff08;软件&#xff09;文件的权限 NFS 是一种基于 TCP/IP 传输的网络文件系统协议 通过使用 NFS 协议&#xff0c;客户机可以像访问本地目录一样…