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 数据库性能问题,导致查询任务和操作日志数据卡…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
