前端预览pdf文件(后端返回pdf文件流)

前端预览pdf文件(后端返回pdf文件流)

怎么判断后端是不是返回的文件流?

我的后端给的接口直接在浏览器输入完整地址会自动下载pdf文件,这样就是返回的pdf文件流,亲试比较方便的有iframe和直接window.open临时地址.

window.open临时地址.
 fetch(`${this.$config.VUE_APP_BASE_API}/api/ai/knowledge/api/preview?fileId=${data.fileId}`,//你的pdf文件下载路径{headers: {Authorization: getToken(),},method: "GET",responseType: "arraybuffer",//一定是这个 前面一直填的"blob"一直不成功,改成这个就好了}).then((res) => res.blob()).then((res) => {const binaryData = [];binaryData.push(res);//获取blob链接this.pdfSrc = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));window.open(this.pdfSrc); //此地址也可直接填入iframe的src中以达到预览的目的});
iframe
<iframe style="width: 800px; height: 500px" :src="pdfSrc"></iframe></div>

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

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

相关文章

QT中调用第三方库的翻译接口时,接口内部加载翻译文件资源失败,导致界面无法正确显示翻译结果

1、背景 在 QT中如何对引入的第三方库进行翻译 一文中我们验证了如何对程序中引用的第三方库进行翻译的手段,当时第三方库内部翻译文件的加载是基于以下形式(将qm文件放置于exe同级目录下形式加载的)。 // 第三方库接口 void MainWindow::setLanguage(QString context) {i…

电机专用32位MCU PY32MD310,Arm® Cortex-M0+内核

PY32MD310是一颗专为电机控制设计的MCU&#xff0c;非常适合用做三相/单相 BLDC/PMSM 的主控芯片。芯片采用了高性能的 32 位 ARM Cortex-M0 内核&#xff0c;QFN32封装。内置最大 64 Kbytes flash 和 8 Kbytes SRAM 存储器&#xff0c;最高48 MHz工作频率&#xff0c;多达 16 …

C++全栈聊天项目(21) 滚动聊天布局设计

滚动聊天布局设计 我们的聊天布局如下图 最外层的是一个chatview&#xff08;黑色&#xff09;&#xff0c; chatview内部在添加一个MainLayout&#xff08;蓝色&#xff09;&#xff0c;MainLayout内部添加一个scrollarea(红色)&#xff0c;scrollarea内部包含一个widget&…

ArcGIS for js 4.x FeatureLayer 加载、点选、高亮

安装arcgis for js 4.x 依赖&#xff1a; npm install arcgis/core 一、FeatureLayer 加载 代码如下&#xff1a; <template><view id"mapView"></view></template><script setup>import "arcgis/core/assets/esri/themes/li…

【区分vue2和vue3下的element UI ¶Rate 评分组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 和 Vue 3 的上下文中&#xff0c;Element UI 和 Element Plus&#xff08;Element UI 的 Vue 3 版本&#xff09;都提供了 el-rate 评分组件。然而&#xff0c;由于 Vue 3 和 Element Plus 的出现&#xff0c;API 和使用方式可能会有所不同。以下是对 Vue 2 的 Elemen…

Dify的Agent和DSPy:让AI更懂你

引言 在人工智能的世界里&#xff0c;大型语言模型&#xff08;LLM&#xff09;正变得越来越聪明&#xff0c;但要让它们真正为我们工作&#xff0c;我们还需要一些助手。Dify的Agent和DSPy就是这样的助手&#xff0c;它们帮助AI更懂我们的需求。今天&#xff0c;我们就用简单…

window.clearInterval(timer) 清除定时器

window.clearInterval(timer)是用来清除定时器的方法。在JavaScript中&#xff0c;使用定时器可以在指定的时间间隔执行一段代码。通常&#xff0c;使用setTimeout()方法可以在一定时间后执行一次代码&#xff0c;而使用setInterval()方法可以在每个时间间隔执行一次代码。 使…

西米支付:刷卡手续费进入高费率时代! 十多家支付机构公布最新收费标准

《非银行支付机构监督管理条例》自5月1日施行以来&#xff0c;越来越多支付机构落实收费透明化。 支付界注意到&#xff0c;日前&#xff0c;拉卡拉、银联商务两家持牌支付公司公布了新的收单业务收费标准。 拉卡拉在其官网公布了最新的“收费项目及收费标准公示”&#xff0…

3040. 相同分数的最大操作数目 II Medium

给你一个整数数组 nums &#xff0c;如果 nums 至少 包含 2 个元素&#xff0c;你可以执行以下操作中的 任意 一个&#xff1a; 选择 nums 中最前面两个元素并且删除它们。 选择 nums 中最后两个元素并且删除它们。 选择 nums 中第一个和最后一个元素并且删除它们。 一次操作…

Elasticsearch - No mapping found for [field_name] in order to sort on

chax根据关键字Action, MD5&#xff0c;模糊索引202*.log查询 curl -u user:password -H "Content-Type: application/json" http://127.1:9200/202*.log/_search?pretty -XPOST -d {"query": {"bool": {"should": [{"bool"…

GSS7000卫星导航模拟器结合RTKLIB 接收NTRIP网络RTCM数据以输出RS232

本文聚焦&#xff0c;使用GSS7000仿真GNSS NTRIP&#xff0c;利用开源工具RTKLIB 作为NTRIP Client 接受GSS7000仿真的RTCM数据&#xff0c; 并通过STRSVR将收到的RTCM数据通过USB-RS232数据线吐出&#xff0c;并转给DUT&#xff0c;让其获得RTK -FIXED 固定解。 废话不多说&a…

DynamicExpresso:强大的动态执行C#表达式解析器

推荐一个强大动态表达式解析器&#xff0c;方便我们在项目中&#xff0c;动态执行C#脚本。 01 项目简介 DynamicExpresso内置了解析逻辑&#xff0c;它能够将.NET的lambda表达式或委托转化为C#语句&#xff0c;并在内存中的动态执行。 它不生成任何汇编&#xff0c;而是构建…

Java类与变量与方法

Java内存结构分析&#xff1a; 栈&#xff1a;存储基本数据类型、局部变量 堆&#xff1a;存放对象和数组 方法区&#xff1a;常量池()常量&#xff0c;比如字符串、加载类信息 创建对象时&#xff0c;在方法区加载类信息&#xff0c;在堆开辟空间&#xff0c;栈上的变量记录堆…

InnoDB 四大特性知道吗?

InnoDB 是 MySQL 数据库中的一种存储引擎&#xff0c;它具有许多特性&#xff0c;但通常被认为有以下几个主要特点&#xff1a; 行级锁定&#xff1a;InnoDB 支持行级锁定&#xff0c;这意味着它在处理并发事务时&#xff0c;只锁定那些需要修改的行&#xff0c;而不是整个表或…

独享IP VS 原生IP,二者的区别与定义详解

原生IP&#xff1a;原生IP是指由Internet服务提供商&#xff08;ISP&#xff09;直接分配给用户的IP地址&#xff0c;这些IP地址通常反映了用户的实际地理位置和网络连接。原生IP是用户在其所在地区或国家使用的真实IP地址&#xff0c;与用户的物理位置直接相关。在跨境电商中&…

2024教资认定报名流程,点赞收藏!

2024年要进行教资认定的宝子们提早准备 &#x1f525;教资认定网上报名流程概览 一、进入教资认定网报入口 二、进行实名核验 三、申请网报时间查询 四、个人信息维护 五、认定申请报名 &#x1f525;教资认定所需材料 1⃣️身份证 2⃣️户口本&#xff0f;居住证&#xff0f;学…

基本 MOSFET 恒流源

恒流源在电路分析练习和网络定理中占有重要地位&#xff0c;然后它们似乎或多或少消失了。。。除非你是IC设计师。尽管在典型 PCB 设计中很少遇到&#xff0c;但电流源在模拟 IC 领域却无处不在。这是因为它们 1) 用于偏置&#xff0c;2) 作为有源负载。 偏置&#xff1a; 用作…

Docker搭建可道云

Docker搭建可道云&#xff08;存储&#xff09; 文章目录 Docker搭建可道云&#xff08;存储&#xff09;介绍资源列表基础环境一、安装Docker二、配置Docker加速器三、搭建可道云私有云盘3.1、编写Dockerfile3.2、上传资源到指定目录3.3、查看目录下所有资源 四、构建镜像五、…

【学术小白成长之路】01三方演化博弈(基于复制动态方程) -基础概念与模型构建

1.演化博弈基础知识 经典博弈论起源于1944年Von Neumann和Morgenstern合著的《博弈论与经济学行为》&#xff0c;是研究理性决策者之间竞争和合作关系的数学方法。 博弈论主要研究完全理性的博弈个体为实现利益最大化而做的策略选择&#xff0c;在过去几十年取得了极大发展&am…

计算机网络--物理层

计算机网络--计算机网络概念 计算机网络--物理层 计算机网络--数据链路层 计算机网络--网络层 计算机网络--传输层 计算机网络--应用层 1. 基本概念 物理层的概念&#xff1a;物理层解决如何在在连接各种计算机的传输媒体上传输数据比特流&#xff0c;而不是指具体的传输…