vue3移动端嵌入pdf的两种办法
1.使用embed嵌入
好处:简单,代码量少,功能齐全
缺点:有固定样式,难以修改,不可定制
<embed class="embedPdf"
:src="pdfurl"
type="application/pdf">
2.使用vue-pdf-embed(pdf预览)的形式定制嵌入pdf
优点:除了pdf的内容别的都可以修改,可以定制样式
缺点:要自己手写下载,下一页,上一页等功能
使用vue-pdf-embed插件展示预览pdf(这里只能展示一页,或者不分页全部展示,就会是一长条,所以我们自己做分页。
<div class="vuePdfEmbed"><VuePdfEmbed:source="state.source":style="scaleFun"class="vue-pdf-embed":page="state.pageNum"width="700"/><div class="page-tool"><div class="page-tool-item" @click="lastPage">上一页</div><div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div><div class="page-tool-item" @click="nextPage">下一页</div><div class="page-tool-item" @click="downloadPDF">下载</div></div></div>
分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数,这个函数是一个异步函数,之后会返回pdf的信息(别的信息基本没用,只有numPages比较有用。)
import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数const pdfurl = ref("......pdf地址")
const state = reactive({source: pdfurl, //预览pdf文件地址pageNum: 1, //当前页面scale: 1, // 缩放比例numPages: 0, // 总页数
});
const scaleFun = reactive({transform:'scale('+state.scale+')'
})// 获取上一页
function lastPage(){if(state.pageNum>1){state.pageNum--}
}// 获取下一页
function nextPage(){if(state.pageNum<state.numPages){state.pageNum++}
}// 下载pdf
function downloadPDF(){fetch(encodeURI(pdfurl.value)).then(res => {res.blob().then(myBlob => {const href = URL.createObjectURL(myBlob);const a = document.createElement('a');a.href = href;a.download = 'report'; // 下载文件重命名a.click();a.remove();});});
}onMounted(() => {// 加载异步任务const loadingTask = createLoadingTask(state.source);// 载入pdf后获取页数loadingTask.promise.then((pdf) => {state.numPages = pdf.numPages;});
分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数,这个函数是一个异步函数,之后会返回pdf的信息(别的信息基本没用,只有numPages比较有用。)
import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数const pdfurl = ref("......pdf地址")
const state = reactive({source: pdfurl, //预览pdf文件地址pageNum: 1, //当前页面scale: 1, // 缩放比例numPages: 0, // 总页数
});
const scaleFun = reactive({transform:'scale('+state.scale+')'
})// 获取上一页
function lastPage(){if(state.pageNum>1){state.pageNum--}
}// 获取下一页
function nextPage(){if(state.pageNum<state.numPages){state.pageNum++}
}// 下载pdf
function downloadPDF(){fetch(encodeURI(pdfurl.value)).then(res => {res.blob().then(myBlob => {const href = URL.createObjectURL(myBlob);const a = document.createElement('a');a.href = href;a.download = 'report'; // 下载文件重命名a.click();a.remove();});});
}onMounted(() => {// 加载异步任务const loadingTask = createLoadingTask(state.source);// 载入pdf后获取页数loadingTask.promise.then((pdf) => {state.numPages = pdf.numPages;});
.vuePdfEmbed{flex: 1;display: flex;height: 100%;flex-direction: column;
}
.vuePdfEmbed{.page-tool {padding-left: 15px;padding-right: 15px;display: flex;align-items: center;background: rgb(66, 66, 66);color: white;border-radius: 19px;z-index: 100;cursor: pointer;width: 320px;align-items: center;margin: auto;justify-content: space-around;}.page-tool-item {padding: 8px 15px;padding-left: 10px;cursor: pointer;}
}相关文章:
vue3移动端嵌入pdf的两种办法
1.使用embed嵌入 好处:简单,代码量少,功能齐全 缺点:有固定样式,难以修改,不可定制 <embed class"embedPdf" :src"pdfurl" type"application/pdf">2.使用vue-pdf-e…...
中文编程开发语言工具系统化教程初级1上线
中文编程系统化教程初级1 学习编程捷径:(不论是正在学习编程的大学生,还是IT人士或者是编程爱好者,在学习编程的过程中用正确的学习方法 可以达到事半功倍的效果。对于初学者,可以通过下面的方法学习编程,…...
零售数据分析模板分享(通用型)
零售数据来源多,数据量大,导致数据的清洗整理工作量大,由于零售的特殊性,其指标计算组合更是多变,进一步导致了零售数据分析工作量激增,往往很难及时分析数据,发现问题。那怎么办?可…...
Spring Cloud之微服务
目录 微服务 微服务架构 微服务架构与单体架构 特点 框架 总结 SpringCloud 常用组件 与SpringBoot关系 版本 微服务 微服务:从字面上理解即:微小的服务; 微小:微服务体积小,复杂度低,一个微服…...
Linux命令(104)之date
linux命令之date 1.date介绍 linux命令date用来设置和显示系统日期和时间 2.date用法 date [参数] date参数 参数说明-s修改并设置时间-d可以显示以前和未来的时间%H小时%M分钟%S秒%X等价于%H %M %S%F显示当前所有时间属性%Y完整年份%m月%d日%A星期的全称 3.实例 3.1.当前…...
微信小程序投票管理系统:打造智能、便捷的投票体验
前言 随着社交网络的兴起和移动互联网的普及,人们对于参与和表达意见的需求越来越强烈。在这个背景下,微信小程序投票管理系统应运而生。它为用户提供了一个智能、便捷的投票平台,使用户可以轻松创建和参与各种类型的投票活动。本文将详细介…...
【算法训练-动态规划 五】【二维DP问题】编辑距离
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【动态规划】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…...
Windows电脑如何录制电脑桌面?
如果你使用的电脑是Windows系统,那你是不是想知道如何在Windows电脑上录制电脑桌面? 本文以win10为例,好消息是,Windows 10电脑自带录屏工具,你可以直接使用此录屏工具轻松录制视频,而无需下载其他第三方软…...
ubuntu18.04双系统安装(2023最新最详细)以及解决重启后发现进不了Ubuntu问题
目录 一.简介 二.安装教程 1.首先确定了电脑的引导格式是UEFIGPT还是BIOSMBR 2. 使用Windows磁盘管理划分足够的磁盘空间 3. 开始安装 三.重启后发现自动进入WIN10系统了,进不了Ubuntu? 一.简介 Linux是一种自由和开放源代码的操作系统内核&#x…...
Springboot + screw 数据库快速开发文档
1、方式1 引入依赖 <dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</artifactId><version>1.0.5</version></dependency> /*** 文档生成 Springboot2.X screw数据库快速开发文档(74&…...
2 第一个Go程序
概述 在上一节的内容中,我们介绍了Go的前世今生,包括:Go的诞生、发展历程、特性和应用领域。从本节开始,我们将正式学习Go语言。Go语言是一种编译型语言,也就是说,Go语言在运行之前需要先进行编译ÿ…...
Leetcode—2678.老人的数目【简单】
2023每日刷题(八) Leetcode—2678.老人的数目 int countSeniors(char ** details, int detailsSize){ int ans 0; int i; int tens 0; int ones 0; for(i 0; i < detailsSize; i) { tens ((details i) 11) - ‘0’; ones ((details i) 12)…...
解决 /bin/bash^M: bad interpreter: No such file or directory
问题描述 linux 系统中知行*.sh 文件报/bin/bash^M: bad interpreter: No such file or directory 原因: .sh文件是在windows系统编写的,在linux执行就有问题 解决过程 转化下格式执行如下命令 # dos2unix app.sh 结果bash: dos2unix: command not …...
Spring Cloud之服务注册与发现(Eureka)
目录 Eureka 介绍 角色 实现流程 单机构建 注册中心 服务提供者 服务消费者 集群搭建 注册中心 服务提供者 自我保护机制 原理分析 Eureka 介绍 Eureka是spring cloud中的一个负责服务注册与发现的组件,本身是基于REST的服务,同时还提供了…...
Rust-后端服务调试入坑记
这篇文章收录于Rust 实战专栏。这个专栏中的相关代码来自于我开发的笔记系统。它启动于是2023年的9月14日。相关技术栈目前包括:Rust,Javascript。关注我,我会通过这个项目的开发给大家带来相关实战技术的分享。 如果你关注过我的Rust 实战里…...
Flask四种配置方式
Flask是一个轻量级的Python Web框架,被广泛应用于Web开发中。Flask提供了多种配置方式,可以根据不同的需求和场景进行选择。本篇博客将介绍Flask的几种配置方式,并提供相关代码示例。 Flask应用程序的配置对象 在Flask中,应用程序…...
基于nodejs+vue备忘记账系统mysql
目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…...
使用Vscode创建一个C_Hello程序
Vscode用来学习C语言语法确实很方便。问题是安装好了,不会用,或编译失败,也是常有的事情,其中一个原因就是不会创建工作区。下面介绍使用Vscode创建一个C语言工作区。有时候看着很简单,时间久了,我竟然忘记…...
【31】c++设计模式——>模板方法模式
模板方法模式通常由以下几个部分组成: 1.抽象基类(Abstract Base Class):抽象基类定义了一个算法的骨架,其中包含了模板方法和一些基本操作方法。模板方法在抽象基类中被声明为虚函数,它定义了算法的流程&…...
docker和K8S环境xxl-job定时任务不执行问题总结
文章目录 xxl-job 任务调度原理1 问题1 时区导致的任务没有执行的问题解决方案 2 执行器注册和下线导致的问题(IP问题)解决方案 3 问题3 调度成功,但是执行器的定时任务未执行4 问题4 数据库性能问题,导致查询任务和操作日志数据卡…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
