当前位置: 首页 > 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…...

如何摆脱游戏卡顿困扰:DLSS Swapper的智能性能管理方案

如何摆脱游戏卡顿困扰&#xff1a;DLSS Swapper的智能性能管理方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 当我们沉浸在《赛博朋克2077》的夜之城&#xff0c;或是探索《艾尔登法环》的交界地时&#xff0c;突…...

FPGA综合优化:KEEP与DONT_TOUCH属性详解

1. FPGA设计中的综合优化基础在FPGA设计流程中&#xff0c;综合阶段是将RTL代码转换为门级网表的关键步骤。Xilinx Vivado等综合工具会默认执行各种优化操作以提高设计性能并减少资源占用。这些优化包括但不限于&#xff1a;常量传播、寄存器合并、冗余逻辑消除等。虽然这些优化…...

AEB系统有哪些应用场景?AEB系统有哪些感知方案

一旦检测到可能发生碰撞的情况&#xff0c;AEB系统会立即启动&#xff0c;自动触发车辆的制动系统&#xff0c;这便是AEB系统的作用。为增进大家对AEB系统的认识&#xff0c;本文将对AEB系统具体应用场景及相关信息予以介绍。如果你对AEB系统具有兴趣&#xff0c;不妨继续往下阅…...

Python性能优化实战:Numba JIT编译器原理与高性能计算应用

1. 项目概述&#xff1a;当Python遇上性能瓶颈&#xff0c;Numba如何成为“救火队长”&#xff1f;在数据科学、科学计算和机器学习领域&#xff0c;Python以其简洁的语法和丰富的生态库&#xff08;如NumPy、Pandas、SciPy&#xff09;成为了事实上的标准语言。然而&#xff0…...

DMRG-SCF方法:量子化学强关联系统的高效计算方案

1. DMRG-SCF方法概述&#xff1a;量子化学中的强关联系统解决方案密度矩阵重整化群自洽场&#xff08;DMRG-SCF&#xff09;方法是近年来量子化学领域最具突破性的进展之一&#xff0c;它巧妙结合了两种经典理论的优势。作为一位长期从事量子化学计算的科研人员&#xff0c;我见…...

前端技能树:从知识图谱到实战路径的系统学习指南

1. 项目概述&#xff1a;一个为掘金社区量身定制的技能树最近在GitHub上看到一个挺有意思的项目&#xff0c;叫Wscats/juejin-skills。光看名字&#xff0c;你可能会以为这是一个教你如何在掘金社区写爆款文章、玩转运营的“秘籍”。但点进去之后&#xff0c;你会发现它的内涵远…...

粮食安全政策托底,农业ETF(562900.SH)交易活跃度升温

5月14日&#xff0c;A股农业板块迎来温和上行&#xff0c;易方达农业ETF&#xff08;562900.SH&#xff09;收报0.756元&#xff0c;涨幅0.93%&#xff0c;跑赢跟踪标的中证现代农业指数0.85%的涨幅。数据显示&#xff0c;该ETF当日量比为1.13&#xff0c;换手率达9.54%&#x…...

终极指南:ta-lib-python社区案例分享与实用应用技巧

终极指南&#xff1a;ta-lib-python社区案例分享与实用应用技巧 【免费下载链接】ta-lib-python Python wrapper for TA-Lib (http://ta-lib.org/). 项目地址: https://gitcode.com/gh_mirrors/ta/ta-lib-python ta-lib-python是一个强大的Python技术分析库&#xff0c;…...

构建AI对话桥梁:Claude API中间件设计与工程实践

1. 项目概述&#xff1a;构建一个高效、可控的AI对话桥梁最近在折腾一个挺有意思的项目&#xff0c;叫openclaw-claude-bridge。简单来说&#xff0c;这是一个“桥梁”工具&#xff0c;它的核心使命是让开发者能够以一种更灵活、更可控的方式&#xff0c;将强大的Claude系列AI模…...

Openclaw-Connector:构建高可靠数据集成管道的核心架构与实战

1. 项目概述与核心价值最近在折腾一些自动化流程和跨平台数据同步时&#xff0c;发现了一个挺有意思的项目——Openclaw-Connector。这名字听起来就有点“机械爪”的感觉&#xff0c;实际上它也确实是一个旨在“抓取”和“连接”不同系统、不同数据源的中间件工具。简单来说&am…...