PC端实现PDF预览(支持后端返回文件流 || 返回文件URL)

一、使用插件

插件名称:vue-office/pdf
版本:2.0.2
安装插件:npm i @vue-office/pdf@^2.0.2
1、“@vue-office/pdf”: “^2.0.2”,
2、 npm i @vue-office/pdf@^2.0.2

二、代码实现

// 引入组件 (在需要使用的页面中直接引入)
import VueOfficePdf from '@vue-office/pdf'// 在页面中引用
<vue-office-pdf src="https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf" style="height: 580px" />// 一 、如果后端返回的是文件url直接把文件url放在组件的src上就可以展示// 二、如果后端返回的是文件流 、需要前端将文件流转成url,在放在组件的src上才可以展示 
// 1、文件流如何转成 url? 代码如下getBlob({path:"20250120123710-19c66fa910634be9.pdf"}).then((res:any)=>{}).finally(async ()=>{// 'https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf') 请求地址const response = await fetch('https://xxxxxx.net/view-pdf?path=20250120123710-19c66fa910634be9.pdf');const blob = await response.blob(); // 将文件流转换为 Bloburl.value = URL.createObjectURL(blob); // 将 Blob 转换为 URLconsole.log('url:',url.value,blob);})

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

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

相关文章

【统计信号处理基础——估计与检测理论】Vol1.Ch1. 引言

系列目录 【统计信号处理基础——估计与检测理论】Vol1.Ch2. 最小方差无偏估计 文章目录 1. 信号处理中的估计2. 估计的数学问题3. 估计量性能评估习题1.11.21.31.41.5 1. 信号处理中的估计 从离散时间波形或一组数据集中提取参数的问题。我们有 N N N点数据集 { x [ 0 ] , x …

Spring Boot 邂逅Netty:构建高性能网络应用的奇妙之旅

一、引言 在当今数字化时代&#xff0c;构建高效、可靠的网络应用是开发者面临的重要挑战。Spring Boot 作为一款强大的 Java 开发框架&#xff0c;以其快速开发、简洁配置和丰富的生态支持&#xff0c;深受广大开发者喜爱。而 Netty 作为高性能、异步的网络通信框架&#xff…

【openwrt】openwrt odhcpd IPv6 prefix_filter选项说明

prefix_filter 在 OpenWrt 的 odhcpd 配置中,prefix_filter 是一个重要的选项,用于控制哪些 IPv6 前缀可以通过 Router Advertisement (RA) 或 DHCPv6 广播到客户端 prefix_filter 的作用 prefix_filter 的主要功能是限制路由器向客户端广播的 IPv6 前缀。它允许管理员指定一…

Spring--SpringMVC使用(接收和响应数据、RESTFul风格设计、其他扩展)

SpringMVC使用 二.SpringMVC接收数据2.1访问路径设置2.2接收参数1.param和json2.param接收数据3 路径 参数接收4.json参数接收 2.3接收cookie数据2.4接收请求头数据2.5原生api获取2.6共享域对象 三.SringMVC响应数据3.1返回json数据ResponseBodyRestController 3.2返回静态资源…

Unity在WebGL中拍照和录视频

原工程地址https://github.com/eangulee/UnityWebGLRecoder Unity版本2018.3.6f1&#xff0c;有点年久失修了 https://github.com/xue-fei/Unity.WebGLRecorder 修改jslib适配了Unity2021 效果图 录制的视频 Unity在WebGL中拍照和录视频

数据结构——AVL树的实现

Hello&#xff0c;大家好&#xff0c;这一篇博客我们来讲解一下数据结构中的AVL树这一部分的内容&#xff0c;AVL树属于是数据结构的一部分&#xff0c;顾名思义&#xff0c;AVL树是一棵特殊的搜索二叉树&#xff0c;我们接下来要讲的这篇博客是建立在了解搜索二叉树这个知识点…

无监督<视觉-语言>模型中的跨模态对齐

在当前的人工智能领域&#xff0c;跨模态学习尤其是视觉和语言的结合&#xff0c;正迅速成为一项基础性技术。传统的视觉模型和语言模型大多是分开训练的&#xff0c;处理独立模态的数据。然而&#xff0c;随着视觉-语言模型&#xff08;Vision-Language Models, VLMs&#xff…

后端SpringBoot学习项目-用户管理-增删改查-service层

仓库地址 在初版代码中&#xff0c;已经实现了基础的增删改查。 但是&#xff0c;逻辑处理都放在Controller层中并没有分为Service层&#xff0c;所以&#xff0c;代码升级时候必须补充上去。 代码结构 升级后的代码结构有所变化。 --common 公共插件 --controller…

【25美赛A题-F题全题目解析】2025年美国大学生数学建模竞赛(MCM/ICM)解题思路|完整代码论文集合

我是Tina表姐&#xff0c;毕业于中国人民大学&#xff0c;对数学建模的热爱让我在这一领域深耕多年。我的建模思路已经帮助了百余位学习者和参赛者在数学建模的道路上取得了显著的进步和成就。现在&#xff0c;我将这份宝贵的经验和知识凝练成一份全面的解题思路与代码论文集合…

jenkins-k8s pod方式动态生成slave节点

一. 简述&#xff1a; 使用 Jenkins 和 Kubernetes (k8s) 动态生成 Slave 节点是一种高效且灵活的方式来管理 CI/CD 流水线。通过这种方式&#xff0c;Jenkins 可以根据需要在 Kubernetes 集群中创建和销毁 Pod 来执行任务&#xff0c;从而充分利用集群资源并实现更好的隔离性…

详解:TCP/IP五层(四层)协议模型

一.五层&#xff08;四层&#xff09;模型 1.概念 TCP/IP协议模型分为五层&#xff1a;物理层、数据链路层、网络层、传输层和应用层。这五层每一层都依赖于其下一层给它提供的网络去实现需求。 1&#xff09;物理层&#xff1a;这是最基本的一层&#xff0c;也是最接近硬件…

关于java实现word(docx、doc)转html的解决方案

最近在研究一些关于文档转换格式的方法&#xff0c;因为需要用在开发的一个项目上&#xff0c;所以投入了一些时间&#xff0c;给大家聊下这块逻辑及解决方案。 一、关于word转换html大致都有哪些方法&#xff1f; &#xff08;1&#xff09;使用 Microsoft Word 导出 其实该…

doris:Insert Into Values

INSERT INTO VALUES 语句支持将 SQL 中的值导入到 Doris 的表中。INSERT INTO VALUES 是一个同步导入方式&#xff0c;执行导入后返回导入结果。可以通过请求的返回判断导入是否成功。INSERT INTO VALUES 可以保证导入任务的原子性&#xff0c;要么全部导入成功&#xff0c;要么…

C语言初阶--折半查找算法

目录 练习1&#xff1a;在一个有序数组中查找具体的某个数字n 练习2&#xff1a;编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 练习3&#xff1a;简单编写代码实现&#xff0c;模拟用户登录情景&#xff0c;并且只能登录三次 练习4&#xff1a;猜数字…

单片机(STC89C52)开发:点亮一个小灯

软件安装&#xff1a; 安装开发板CH340驱动。 安装KEILC51开发软件&#xff1a;C51V901.exe。 下载软件&#xff1a;PZ-ISP.exe 创建项目&#xff1a; 新建main.c 将main.c加入至项目中&#xff1a; main.c:点亮一个小灯 #include "reg52.h"sbit LED1P2^0; //P2的…

Adobe的AI生成3D数字人框架:从自拍到生动的3D化身

一、引言 随着人工智能技术的发展,我们见证了越来越多创新工具的出现,这些工具使得图像处理和视频编辑变得更加智能与高效。Adobe作为全球领先的创意软件公司,最近推出了一项令人瞩目的新技术——一个能够将普通的二维自拍照转换成栩栩如生的三维(3D)数字人的框架。这项技…

Ansys Thermal Desktop 概述

介绍 Thermal Desktop 是一种用于热分析和流体分析的通用工具。它可用于组件或系统级分析。 来源&#xff1a;CRTech 历史 Thermal Desktop 由 C&R Technologies (CR Tech) 开发。它采用了 SINDA/FLUINT 求解器。SINDA/FLUINT 最初由 CR Tech 的创始人为 NASA 的约翰逊航…

【数据分享】1929-2024年全球站点的逐日平均能见度(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff01;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2024年全球气象站点…

Java27:SPRING

一&#xff1a;SPRING介绍 1.spring的概念 广义的Spring&#xff1a;Spring技术栈&#xff08;全家桶&#xff09; 广义的Spring泛指以Spring Framework 为基础的Spring技术栈&#xff0c;Spring不在是一个单纯的应用框架&#xff0c;而是逐渐发展成为一个由不同子模块组成的…

数据标注开源框架 Label Studio

数据标注开源框架 Label Studio Label Studio 是一个开源的、灵活的数据标注平台&#xff0c;旨在帮助开发者和数据科学家轻松创建高质量的训练数据集。它支持多种类型的数据&#xff08;如文本、图像、音频、视频等&#xff09;以及复杂的标注任务&#xff08;如分类、命名实体…