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

『VUE H5页面 - PDF预览』

  • 使用依赖:vue-pdf
  • 实现需求:将 PDF url 地址 转换为本地页面预览
<template><div class="pdf-preview"><NavBar /><div class="container"><VuePdf v-for="i in numPages" :key="i" class="pdf" :src="src" :page="i"></VuePdf></div></div>
</template><script>
import { Toast } from 'vant'
export default {name: 'PdfPreview',components: {VuePdf: () => import(/* webpackChunkName: "vue-pdf-component" */ 'vue-pdf'),},props: {},data() {return {pdfUrl: '', //      pdf在线地址numPages: '', //    页数src: '',}},created() {this.pdfUrl = this.$route.query.pdfUrlthis.loadingPDF(this.pdfUrl)},methods: {// 具体用法参考:https://github.com/FranckFreiburger/vue-pdf#readmeasync loadingPDF(url) {if (!url) returntry {const { default: pdf } = await import(/* webpackChunkName: "vue-pdf-method" */ 'vue-pdf')this.src = pdf.createLoadingTask(url)this.src.promise.then(pdf => {this.numPages = pdf.numPages}).catch(error => Toast(error.message))} catch (error) {console.info(error)}},},
}
</script><style lang="scss" scoped>
.pdf-preview {width: 100%;height: 100%;.container {width: 100%;height: calc(100% - #{$vue-container-top-height});background: #f5f5f5;position: relative;overflow-y: scroll;.pdf {width: 100%;&:not(:last-child) {margin-bottom: 10px;}}}
}
</style>

相关文章:

『VUE H5页面 - PDF预览』

使用依赖&#xff1a;vue-pdf实现需求&#xff1a;将 PDF url 地址 转换为本地页面预览 <template><div class"pdf-preview"><NavBar /><div class"container"><VuePdf v-for"i in numPages" :key"i" cla…...

使用lua-resty-request库编写爬虫IP实现数据抓取

目录 一、lua-resty-request库介绍 二、使用lua-resty-request库进行IP数据抓取 1、获取IP地址 2、设置请求 3、处理数据 三、代码实现 四、注意事项 五、总结 本文将深入探讨如何使用lua-resty-request库在爬虫程序中实现IP数据抓取。我们将首先介绍lua-resty-request…...

vue-admin-templete项目配置在手机上预览

参考文档&#xff1a; https://blog.csdn.net/qq_29752857/article/details/109802801想要在手机上预览本地打开的vue-admin-templete项目&#xff0c;首先要确保手机和电脑在同一网段。 参考文档&#xff1a;https://blog.csdn.net/m0_57236802/article/details/1315234471.查…...

服务号升级订阅号的流程

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;首先我们要知道服务号和订阅号有什么区别。服务号侧重于对用户进行服务&#xff0c;每月可推送4次&#xff0c;每次最多8篇文章&#xff0c;发送的消息直接显示在好友列表中。订阅号更侧重于信息传…...

redhat7.4 安装lnmp操作环境

PacVim安装 https://baijiahao.baidu.com/s?id1601033830453371540&wfrspider&forpc 安装php https://www.cnblogs.com/alliancehacker/p/12255445.html https://blog.csdn.net/weixin_39709920/article/details/104274545 安装mysql https://www.cnblogs.com/laumian…...

Java判断是否有特殊字符串

//特殊字符串过滤private static String REGEX_RULE "[ _~!#$%^&*()|{}:;,\\[\\].<>/?~&#xff01;#&#xffe5;%……&*&#xff08;&#xff09;——|{}【】‘&#xff1b;&#xff1a;\"”“’。&#xff0c;、&#xff1f;]|\n|\r|\t";pri…...

服务器搭建:从零开始创建自己的Spring Boot应用【含登录、注册功能】

当然&#xff0c;你可以先按照IDEA搭建SSM框架【配置类、新手向】完成基础框架的搭建 步骤 1&#xff1a;设计并实现服务器端的用户数据库 在这个示例中&#xff0c;我们将使用MySQL数据库。首先&#xff0c;你需要安装MySQL并创建一个数据库以存储用户信息。以下是一些基本步…...

家用小型洗衣机哪款性价比高?公认好用四款内衣洗衣机推荐

小型的内衣洗衣机由于体积小巧&#xff0c;而且实用&#xff0c;非常适合没有太多空闲时间的上班族以及小型住户的使用。想要挑选到一款能够满足每日清洗需要&#xff0c;同时拥有便携与高效率的小型内衣洗衣机&#xff0c;也许会让你选择得有些烦恼。我们为大家挑选了一些性价…...

Sui zkSend,创建链接可直接发送SUI,快来体验吧

基于zkLogin和Sui的本机密码学构建&#xff0c;zkSend允许用户创建包含特定数量SUI的链接。该链接可以通过任何消息客户端发送&#xff0c;例如电子邮件和直接消息&#xff0c;甚至可以在媒体上转换成QR码。 使用zkSend发送SUI比复制和粘贴钱包地址&#xff0c;然后授权token转…...

SQL面试

#(1)请写出要查询员工J开头的名字其工号(EMPNO)及部门名称(DEPTNA)的 SQL语句SELECT e.emp,e.name,d.deptna FROM emp e left join dept d on d.deptno e.deptno where e.name like J%#(2)请写出要查询 Kevin 所在部门的部门代号(DEPTNO)及部门名称(DEPTNA)的 SQL 语句SELECT e…...

Elasticsearch(一)---介绍

简介 Elasticsearch是一个基于Lucene的实际的分布式搜索和分析引擎。设计用于云计算中&#xff0c;能够达到近实时搜索&#xff0c;稳定&#xff0c;可靠&#xff0c;快速&#xff0c;安装使用方便。基于RESTful接口。 官网地址&#xff1a;Elasticsearch 平台 — 大规模查找…...

Vscode LinuxC++环境配置

C环境配置 文章目录 C环境配置一、Visual Studio Code相关信息二、Python开发环境配置三、C 开发环境配置四、第一个C程序五、附录&#xff1a;vs code 中变量解释 一、Visual Studio Code相关信息 Visual Studio Code 下载地址&#xff1a;https://code.visualstudio.com/dow…...

【tensorboard打开失败】No dashboards are active for the current data set.

这里我再跟视频学的时候&#xff0c;找了很多的指令&#xff0c;说是对应版本不一样&#xff0c;但是发现用了很多指令都可以弹出来跳转的url&#xff0c;那应该就不是输入指令的问题 直到我想把logs里面的文件删掉重新跑的时候&#xff0c;我突然注意到这里有中文字符&#xf…...

客服管理者如何调动客服人员的积极性?

客户是企业的财富&#xff0c;良好的客户服务体验可以有效地促进企业的销售和声誉&#xff0c;因此&#xff0c;客服工作显得尤为重要。而客服人员的积极性直接影响了整个客服部门的质量和效率。如何调动客服人员的积极性&#xff0c;成为了每个客服管理者都需要面对的难题。本…...

Jenkins自动化部署简单配置

下载安装jenkins 安装Jenkins步骤 点击Next的时候会有jdk版本跟Jenkins版本不符合的情况 1. 看下任务管理器内Jenkins服务是否启动&#xff0c;在浏览器里面输入localhost:2023&#xff08;端口号是安装时输入的&#xff09; 2. 根据路径找到放置密码的文件&#xff08;C…...

Linux————内置命令大全

&#xff08;一&#xff09;内置命令 Shell 内置命令&#xff0c;就是由 Bash Shell 自身提供的命令&#xff0c;而不是文件系统中的可执行脚本文件。内置命令的执行速度通常优于外部命令&#xff0c;因为执行外部命令不仅会导致磁盘I/O操作&#xff0c;而且还需要为其fork一个…...

从用户角度出发,如何优化大数据可视化体验|北京蓝蓝UI设计公司

作者&#xff1a;蓝蓝设计-鹤鹤 大数据已经成为人们探索世界的新工具。但是&#xff0c;对于普通用户而言&#xff0c;大数据往往比较抽象和难以理解&#xff0c;因此&#xff0c;大数据可视化作为一种非常有效的工具工具被广泛应用。然而&#xff0c;在实际应用中&#xff0c…...

【vue】封装树形下拉框组件 el-popover+el-tree+el-select

父组件使用 <template><div>{{ array }} 更多属性详见wgyTreeSelect组件<wgyTreeSelectv-model"array":list"list":multiple"true":disabled-ids"[111,113,2]"/></div> </template><script> /*…...

docker安装Kafka,SpringBoot整合Kafka

#拉取镜像 docker pull wurstmeister/zookeeper #运行容器 docker run --restartalways --name zookeeper -p 2181:2181 \ -v /etc/localtime:/etc/localtime -d wurstmeister/zookeeper#拉取镜像 docker pull wurstmeister/kafka#运行容器 docker run --restartalways --name …...

MySQL - InnoDB 的事务支持、锁机制

InnoDB 存储引擎实现了强大的事务支持和锁机制&#xff1a; 事务原理&#xff1a; ACID 属性&#xff1a;InnoDB 支持 ACID&#xff08;原子性、一致性、隔离性、持久性&#xff09;属性&#xff0c;确保数据的一致性和可靠性。事务是一组 SQL 操作&#xff0c;要么全部执行&…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...