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

vue3 H5项目中实现PDF预览

 是需要npm i vue-pdf-embed 安装这个插件的,可兼容ios/Android,下面是本人的使用实例

<template><div class="conten_box"><vue-pdf-embed v-if="pdfSource.url" :source="pdfSource" /></div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ylhtPdf } from "@/api/ht/index";
import VuePdfEmbed from "vue-pdf-embed";const pdfSource = reactive({url: "",cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",cMapPacked: true,
});// 获取pdf需要的url
const getInvitation = () => {ylhtPdf().then(({ data: { code, data, message } }) => {pdfSource.url = data.contract;}).catch(() => {});
}onMounted(() => {getInvitation()
})</script>

相关文章:

vue3 H5项目中实现PDF预览

是需要npm i vue-pdf-embed 安装这个插件的&#xff0c;可兼容ios/Android&#xff0c;下面是本人的使用实例 <template><div class"conten_box"><vue-pdf-embed v-if"pdfSource.url" :source"pdfSource" /></div> <…...

【WebRTC---源码篇】(十一:一)采集编码发送期间使用时间戳的详细解读

一、时间戳定义 1、 NTP时间 NtpTime RealTimeClock::CurrentNtpTime() //获取从1900-01-01 00:00.00到当前时刻经过的时间 int64_t RealTimeClock::CurrentNtpInMilliseconds() //获取从1900-01-01 00:00.00到当前时刻经过的毫秒数,ms int64_t rtc::TimeUTCMicros() //获取…...

Python学习路线 - Python语言基础入门 - Python异常、模块与包

Python学习路线 - Python语言基础入门 - Python异常、模块与包 了解异常什么是异常bug单词的诞生异常演示 异常的捕获方法为什么要捕获异常捕获常规异常捕获指定异常捕获多个异常捕获异常并输出描述信息捕获所有异常异常 else异常的finally 异常的传递Python模块什么是模块模块…...

eventbus,在this.$on监听事件时无法在获取数据

问题&#xff1a;vue中eventbus被多次触发&#xff0c;在this.$on监听事件时&#xff0c;内部的this发生改变导致&#xff0c;无法在vue实例中添加数据。 项目场景 一开始的需求是这样的&#xff0c;为了实现两个组件(A.vue ,B.vue)之间的数据传递。 页面A&#xff0c;点击页面…...

【Python必做100题】之第二十五题(统计字符)

题目&#xff1a;输入一行字符&#xff0c;分别统计出其中英文字母、空格、数字和其他字符的个数 代码如下&#xff1a; string input("请输入字符串:")char 0 number 0 space 0 other 0for i in string:if i.isalpha():char 1elif i.isdigit():number 1eli…...

开发语言:ArkTS

简介 ArkTS是华为为鸿蒙操作系统&#xff08;HarmonyOS&#xff09;开发的一种应用开发语言。这种语言在TypeScript&#xff08;简称TS&#xff09;的基础上进行了扩展&#xff0c;以更好地适应鸿蒙系统的特点和开发需求。ArkTS不仅继承了TS的所有特性&#xff0c;而且还对TS的…...

Qt中字符串转换为JS的函数执行

简介 在 QML 中&#xff0c;将 JavaScript 字符串转换为函数通常涉及使用 Function 构造函数或 eval() 函数。但是&#xff0c;QML 的环境对 JavaScript 的支持有一定的限制&#xff0c;因此不是所有的 JavaScript 功能都可以在 QML 中直接使用。 以下介绍都是在Qt5.12.1…...

TCP/IP:从数据包到网络的演变

引言 TCP/IP协议的起源可以追溯到20世纪60年代末和70年代初&#xff0c;美国国防部高级研究计划局&#xff08;ARPA&#xff09;研究开发一种可靠的通信协议&#xff0c;用于连接分散在不同地点的计算机和资源。 在当时&#xff0c;计算机之间的连接并不像现在这样普遍和便捷…...

闪存驱动器与机械硬盘与固态硬盘

目录 U盘&#xff08;闪存驱动器&#xff09; 固态硬盘&#xff08;SSD&#xff09; 机械硬盘&#xff08;HDD&#xff09; 目前主流 U盘&#xff08;闪存驱动器&#xff09; U盘是便携式存储设备&#xff0c;内部采用闪存芯片作为存储介质。它们通常具有小巧轻便的外形&am…...

java String转asc码,然后ascII再转四位的16进制数。

理论知识补充&#xff1a; char是Java中的保留字&#xff0c;表示一种数据类型。与别的语言不同的是&#xff0c;char在Java中是16位的&#xff0c;因为Java用的是Unicode编码。不过8位的ASCII码包含在Unicode编码中&#xff0c;其值对应十进制的表示范围是0~127。 char是Java八…...

零基础制作宠物用品小程序

随着人们对宠物用品的需求不断增长&#xff0c;越来越多的人开始探索如何制作一个专业的宠物用品小程序。而乔拓云作为一款功能强大的在线商城制作工具&#xff0c;成为了许多商家的首选。本文将详细介绍如何使用乔拓云制作宠物用品小程序&#xff0c;让你轻松上手&#xff0c;…...

【SpringBoot篇】解决缓存击穿问题① — 基于互斥锁方式

文章目录 &#x1f339;什么是缓存击穿&#x1f33a;基于互斥锁解决问题&#x1f6f8;思路 &#x1f3f3;️‍&#x1f308;代码实现 &#x1f339;什么是缓存击穿 缓存击穿是指在使用缓存系统时&#xff0c;对一个热点数据的高并发请求导致缓存失效&#xff0c;多个请求同时访…...

系列一、GitHub搜索技巧

一、GitHub搜索技巧 1.1、概述 作为程序员&#xff0c;GitHub大家应该都再熟悉不过了&#xff0c;很多时候当我们需要使用某一项技能而又无从下手时&#xff0c;通常会在百度&#xff08;面向百度编程&#xff09;或者在GitHub上通过关键字寻找相关案例&#xff0c;比如我想学…...

35.java后端面试宝典

一、自我介绍。 我叫什么&#xff0c;这次是应聘什么岗位&#xff0c;会什么技术&#xff0c;会什么框架&#xff0c;熟练掌握框架之间的整合技术&#xff0c;做过什么项目并且介绍主要做了什么&#xff0c;并且可以为公司带来什么价值。 总的来说&#xff0c;初级Java工程师岗…...

Linux 磁盘空间占满故障解决方法

故障排查&#xff1a; 使用命令查看磁盘使用量 # 使用人类可读的格式(预设值是不加这个选项的...) df -h # --inodes 列出 inode 资讯&#xff0c;不列出已使用 block df -i # 查看当前目录下各个文件及目录占用空间大小 du -sh / 情况一&#xff1a;一般磁盘空间满了&a…...

让生活更智能,P1600边缘智能网关带你进入智能家居新时代

一、什么是P1600边缘智能网关&#xff1f; 在科技日新月异的今天&#xff0c;我们的生活已经被各种智能产品所包围。而在这个智能化的浪潮中&#xff0c;P1600边缘智能网关以其独特的优势&#xff0c;成为了智能家居的重要组成部分。那么&#xff0c;什么是P1600边缘智能网关呢…...

Java与前端:2023年的真实状况与焦虑解读

一、引言 在2023年&#xff0c;IT圈中流传着一些关于Java和前端的言论&#xff0c;这些言论引起了广泛的关注。有些人认为“Java已死、前端已凉”&#xff0c;而另一些人则持不同观点。那么&#xff0c;这些言论背后的真相是什么&#xff1f;它们是在贩卖焦虑吗&#xff1f;本…...

adb 基本命令合集

1.获取所有的包信息&#xff1a; adb shell pm list packages com.yu.weskul 2.清除APP缓存 adb shell pm clear <package-name> 3.查看当前应用及Activity adb shell dumpsys window | findstr "mCurrentFocus" 4.查看应用详细信息 adb shell dumpsys pack…...

[RK-Linux] RK3399支持M.2 NVMe SSD启动

延续《[RK-Linux] 从主线U-Boot移植PCIe及其PHY驱动到RK3399 U-Boot》 启动流程: maskrom -> loader(从 eMMC 存储器加载) -> u-boot(从 eMMC 存储器加载)-> kernel (从 M.2 NVMe SSD 加载)-> rootfs (从 M.2 NVMe SSD 挂载)配置从 M.2 NVMe SSD 启动: …...

LTO-3 磁带机种草终于是用上了

跑来跑去&#xff0c;买了不少配件&#xff0c;终于是把这磁带机给用上了&#xff0c;已经备份好了300 多 GB 的数据。 我们用了 NAS 的数据压缩功能&#xff0c;把需要备份的文件用 NAS 压缩成一个 Zip 文件&#xff0c;如果你可以 tar 的话也行。 这样传输速度更快&#xf…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...