当前位置: 首页 > news >正文

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);})

相关文章:

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

一、使用插件 插件名称&#xff1a;vue-office/pdf 版本&#xff1a;2.0.2 安装插件&#xff1a;npm i vue-office/pdf^2.0.2 1、“vue-office/pdf”: “^2.0.2”, 2、 npm i vue-office/pdf^2.0.2 二、代码实现 // 引入组件 &#xff08;在需要使用的页面中直接引入&#x…...

大模型 / 智能体在智能运维领域的应用总结与发展趋势概述

智能体 智能运维 &#xff1f; 回顾大模型的发展 大模型的发展在过去两年间呈现出爆炸式的增长&#xff0c;成为推动人工智能领域快速进步的关键力量。 2023年3月&#xff1a;百度发布了其知识增强的大语言模型产品“文心一言”&#xff0c;这标志着国内AI大模型产业竞争的…...

uniapp 在线更新应用

在线更新应用及进度条显示 1.比较现安装手机中的apk 与线上apk的版本 getVersion(){var newVersionuni.getStorageSync("newVersion").split(".")var versionplus.runtime.version.split(".") // 获取手机安装的版本var versionNum""…...

AIGC视频生成模型:ByteDance的PixelDance模型

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细介绍ByteDance的视频生成模型PixelDance&#xff0c;论文于2023年11月发布&#xff0c;模型上线于2024年9月&#xff0c;同时期上线的模型还有Seaweed&…...

python远程获取数据库中的相关数据并存储至json文件

1. conn中的5个变量的含义&#xff1a; ① Driver&#xff1a;数据库驱动程序&#xff0c;我使用的是SQL Server数据库。 ② Server&#xff1a;数据库所在的服务器地址。 ③ Database&#xff1a;要连接的数据库的名称。 ④ UID&#xff1a;登录 SQL Server 数据库的用户名…...

Kubernetes v1.28.0安装dashboard v2.6.1(k8s图形化操作界面)

准备工作 Kubernetes v1.28.0搭建教程请参考&#xff1a;Kubernetes v1.28.0集群快速搭建教程-CSDN博客 查看当前集群nodes都是ready状态 查看当前pods都是running状态 下载并修改配置文件 下载 recommended.yaml &#xff0c;下载好之后&#xff0c;进入文件编辑 下载地址…...

详解三种常用标准化:Batch Norm、Layer Norm和RMSNorm

在深度学习中&#xff0c;标准化技术是提升模型训练速度、稳定性和性能的重要手段。本文将详细介绍三种常用的标准化方法&#xff1a;Batch Normalization&#xff08;批量标准化&#xff09;、Layer Normalization&#xff08;层标准化&#xff09;和 RMS Normalization&#…...

linux+docker+nacos+mysql部署

一、下载 docker pull mysql:5.7 docker pull nacos/nacos-server:v2.2.2 docker images 二、mysql部署 1、创建目录存储数据信息 mkdir ~/mysql cd ~/mysql 2、运行 MySQL 容器 docker run -id \ -p 3306:3306 \ --name mysql \ -v $PWD/conf:/etc/mysql/conf.d \ -v $PWD/…...

如何实现gitlab和jira连通

将 GitLab 和 Jira 集成起来可以实现开发任务与代码变更的联动&#xff0c;提高团队协作效率。以下是实现两者连通的详细步骤&#xff1a; 1. 确保必要条件 在进行集成之前&#xff0c;确保以下条件满足&#xff1a; 你有 GitLab 和 Jira 的管理员权限。Jira 是 Jira Cloud 或…...

利用ML.NET精准提取人名

在当今信息爆炸的时代&#xff0c;文本处理任务层出不穷&#xff0c;其中人名提取作为基础且重要的工作&#xff0c;广泛应用于信息检索、社交网络分析、客户关系管理等领域。随着人工智能不断进步&#xff0c;ML.NET作为微软推出的开源机器学习框架&#xff0c;为开发者提供了…...

Node.js的解释

1. Node.js 入门教程 1.1 什么是 Node.js&#xff1f; 1.1.1 Node.js 是什么&#xff1f; Node.js 是一个基于 JavaScript 的开源服务器端运行时环境&#xff0c;允许开发者用 JavaScript 编写服务器端代码。与传统的前端 JavaScript 主要运行在浏览器端不同&#xff0c;Nod…...

Macos下交叉编译安卓的paq8px压缩算法

官方没有android的编译方法&#xff0c;自己编写脚本在macos下交叉编译. 下载源码&#xff1a; git clone https://github.com/hxim/paq8px.git 稍旧的ndk并不能编译成功&#xff0c;需要下载最新的ndkr27c, 最后是使用clang来编译。 编译build.sh export ANDROID_NDK/Vol…...

如何在data.table中处理缺失值

&#x1f4ca;&#x1f4bb;【R语言进阶】轻松搞定缺失值&#xff0c;让数据清洗更高效&#xff01; &#x1f44b; 大家好呀&#xff01;今天我要和大家分享一个超实用的R语言技巧——如何在data.table中处理缺失值&#xff0c;并且提供了一个自定义函数calculate_missing_va…...

从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑

文章目录 从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑一 参考二 安装三 启动准备大模型文件 四 数据集&#xff08;关键&#xff09;&#xff01;4.1 Alapaca格式4.2 sharegpt4.3 在 dataset_info.json 中注册4.4 官方 alpaca_zh_demo 例子 999条数据, 本机微调 5分…...

SQL-leetcode—1164. 指定日期的产品价格

1164. 指定日期的产品价格 产品数据表: Products ---------------------- | Column Name | Type | ---------------------- | product_id | int | | new_price | int | | change_date | date | ---------------------- (product_id, change_date) 是此表的主键&#xff08;具…...

[Day 15]54.螺旋矩阵(简单易懂 有画图)

今天我们来看这道螺旋矩阵&#xff0c;和昨天发的题很类似。没有技巧&#xff0c;全是循环。小白也能懂~ 力扣54.螺旋矩阵 题目描述&#xff1a; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; …...

HTTP 配置与应用(不同网段)

想做一个自己学习的有关的csdn账号&#xff0c;努力奋斗......会更新我计算机网络实验课程的所有内容&#xff0c;还有其他的学习知识^_^&#xff0c;为自己巩固一下所学知识&#xff0c;下次更新校园网设计。 我是一个萌新小白&#xff0c;有误地方请大家指正&#xff0c;谢谢…...

Quartus:开发使用及 Tips 总结

Quartus是Altera&#xff08;现已被Intel收购&#xff09;推出的一款针对其FPGA产品的综合性开发环境&#xff0c;用于设计、仿真和调试数字电路。以下是使用Quartus的一些总结和技巧(Tips)&#xff0c;帮助更高效地进行FPGA项目开发&#xff1a; 这里写目录标题 使用总结TIPS…...

VSCode下EIDE插件开发STM32

VSCode下STM32开发环境搭建 本STM32教程使用vscode的EIDE插件的开发环境&#xff0c;完全免费&#xff0c;有管理代码文件的界面&#xff0c;不需要其它IDE。 视频教程见本人的 VSCodeEIDE开发STM32 安装EIDE插件 Embedded IDE 嵌入式IDE 这个插件可以帮我们管理代码文件&am…...

Golang并发机制及CSP并发模型

Golang 并发机制及 CSP 并发模型 Golang 是一门为并发而生的语言&#xff0c;其并发机制基于 CSP&#xff08;Communicating Sequential Processes&#xff0c;通信顺序过程&#xff09; 模型。CSP 是一种描述并发系统中交互模式的正式语言&#xff0c;强调通过通信来共享内存…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...