pdf文件分页按需查看
pdf预览本来打算粗暴点,一次性查看全部,但是一个pdf四五百页导致手机端查看超出内存直接崩掉,崩掉会导致页面疯狂刷新,所以不得不进行优化
解决思路大致如下:
- canvas转为blob格式以图片的形式加载在页面(Blob URL 是基于磁盘的临时文件,可以减少内存占用)
- 分段按需加载,根据页面滑动位置决定加载哪页数据
- 历史pdf加载数据缓存,避免一直调用获取pdf逻辑,但不可缓存全部历史数据,变量数据过多也会导致崩掉
- 及时移除画布和图片,确保内存被释放
具体实现看代码吧!对了,我这里用的是vue3框架,方案大致都差不多,可供参考
- 安装 pdfjs-dist包(版本为4.10.38)
npm install pdfjs-dist
- 使用
<template><div class="pdf-box"><van-loading v-if="pdfLoading && !isHasFirstPage" size="24px">内容正在玩命加载中,请稍后...</van-loading><div :style="(pdfLoading && !isHasFirstPage)?'position:fixed;transform: translateX(-200%);':''"><div v-for="page in pdfPages" :id="'__pdf_canvas_page_' + page" :key="page" /></div><van-loading v-if="pdfItemLoading && isHasFirstPage" size="24px" style="padding-top:0">滑慢点~,小的加载不过来啦...</van-loading></div>
</template><script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import Worker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'const pdfjsWorker = new Worker()
let pdf = null
const pdfPages = ref(0) // pdf总页数
const pdfLoading = ref(true) // pdf 总页数获取loading
let cachedPages = new Map() // pdf历史 图片信息缓存
const pdfItemLoading = ref(false) // pdf 单独页面加载
const MAX_CACHED_PAGES = 6 // 最大缓存页面数
const lastScrollY = ref(0) // 最后一次滚动位置
const scrollDirection = ref('') // 页面滚动方向 up:上 down:下
const isHasFirstPage = ref(false) // 第一页是否已加载出来// 在组件挂载后加载 PDF
onMounted(() => {const pdfUrl = 'https://example.com/sample.pdf' // 替换为你的 PDF 文件 URLloadPdf(pdfUrl)window.addEventListener('scroll', handleScroll) // 滚动变化时更新条件
})
// 清理事件监听器
onUnmounted(() => {window.removeEventListener('scroll', handleScroll)if (pdf) {pdf.destroy()}
})
// 加载pdf
async function loadPdf(url) {pdfjsLib.GlobalWorkerOptions.workerPort = pdfjsWorkertry {const loadingTask = pdfjsLib.getDocument(url)pdf = await loadingTask.promisepdfPages.value = Number(pdf.numPages)pdfLoading.value = falseawait nextTick(() => {handleScroll()})} catch (err) {pdfLoading.value = falseconsole.error(err)}
}
// 渲染指定页面pdf
const renderPage = (pageNumber) => {return new Promise(() => {(async () => {const page = await pdf.getPage(pageNumber)const viewport = page.getViewport({ scale: 1.5 })const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.height = viewport.heightcanvas.width = viewport.widthawait page.render({ canvasContext: ctx, viewport }).promise// 将画布内容缓存为图片const blobURL = await canvasToBlobURL(canvas)const image = new Image()image.src = blobURL// 将画布内容转换为 Blob URLimage.id = `page-image-${pageNumber}`image.style.width = '100%'// 将图片添加到容器中const container = document.getElementById(`__pdf_canvas_page_${pageNumber}`)container.innerHTML = ''container.appendChild(image)// 缓存 Blob URL 和 Image 标签cachePage(pageNumber, { blobURL, image: image.src })pdfItemLoading.value = false// resolve()})()})
}
// 缓存页面
const cachePage = (pageNumber, data) => {cachedPages.set(pageNumber, data)if (cachedPages.size > 0) { // 第一页是否已加载出来isHasFirstPage.value = true}if (cachedPages.size > MAX_CACHED_PAGES) {// 如果缓存数量超过限制cachedPages = new Map([...cachedPages.entries()].sort((a, b) => a[0] - b[0])) // 排序let oldestPage = ''if (scrollDirection.value === 'up') { // 往上滑动 移除最后的页面const keysArray = [...cachedPages.entries()]oldestPage = keysArray[keysArray.length - 1][0]} else { // 往上滑动 移除最早的页面oldestPage = cachedPages.keys().next().value}if (oldestPage && pageNumber !== oldestPage) {unloadPage(oldestPage)}}
}
// 将画布内容转换为 Blob URL
const canvasToBlobURL = (canvas) => {return new Promise((resolve) => {canvas.toBlob((blob) => {const url = URL.createObjectURL(blob)resolve(url)})})
}
// 清除非可视pdf信息
const unloadPage = (pageNumber) => {const container = document.getElementById(`__pdf_canvas_page_${pageNumber}`)const canvas = document.getElementById(`page-${pageNumber}`)const image = document.getElementById(`page-image-${pageNumber}`)const cachedData = cachedPages.get(pageNumber)if (cachedData) {const rect = container.getBoundingClientRect()container.innerHTML = ''const div = document.createElement('div')div.style.height = rect.height + 'px'container.appendChild(div)if (cachedData.blobURL) {URL.revokeObjectURL(cachedData.blobURL)} // 释放 Blob URL}if (canvas) {canvas.remove()} // 移除画布if (image) {image.remove()} // 移除图片// 从缓存中移除页面cachedPages.delete(pageNumber)
}
// 处理滚动事件
function handleScroll() {// pdfconst windowHeight = window.innerHeightconst currentScrollY = window.scrollY// 判断往上滑动还是往下scrollDirection.value = currentScrollY > lastScrollY.value ? 'down' : 'up'lastScrollY.value = currentScrollYconst pdfPagesArr = Array.from({ length: pdfPages.value }, (_, i) => i + 1)pdfPagesArr.reduce((accumulatorPromise, next) => {return accumulatorPromise.then(() => { // 上一个接口执行完毕再执行下一个const pageElement = document.getElementById('__pdf_canvas_page_' + next)if (pageElement) {const rect = pageElement.getBoundingClientRect()if (!pdfItemLoading.value) {if ((scrollDirection.value === 'up' ? rect.top < windowHeight + 200 : rect.top < windowHeight) && rect.bottom > 0) {if (cachedPages.has(next)) { // 已加载则跳过return}pdfItemLoading.value = truereturn renderPage(next) // 如果页面未加载,则加载该页}}}})}, Promise.resolve())
}
</script>
相关文章:
pdf文件分页按需查看
pdf预览本来打算粗暴点,一次性查看全部,但是一个pdf四五百页导致手机端查看超出内存直接崩掉,崩掉会导致页面疯狂刷新,所以不得不进行优化 解决思路大致如下: canvas转为blob格式以图片的形式加载在页面(B…...
栈/堆/static/虚表
在 C 里,栈空间主要用来存放局部变量、函数调用信息等。下面为你介绍栈空间在 C 里的运用方式。 1. 局部变量的使用 在函数内部定义的变量会被存于栈空间,当函数执行结束,这些变量会自动被销毁。 #include <iostream>void exampleFu…...
计算机网络技术服务管理基于Spring Boot-SSM
目录 一、引言 二、用户需求分析 三、功能介绍 3.1.资源管理: 3.2.故障管理: 3.3.性能管理: 3.4.安全管理: 3.5.配置管理: 3.6.日志管理: 3.7.用户管理࿱…...
Redisson 分布式锁原理
加锁原理 # 如果锁不存在 if (redis.call(exists, KEYS[1]) 0) then# hash结构,锁名称为key,线程唯一标识为itemKey,itemValue为一个计数器。支持相同客户端线程可重入,每次加锁计数器1.redis.call(hincrby, KEYS[1], ARGV[2], 1);# 设置过期时间redis.call(pexpi…...
LLM(5):了解 GPT 架构
1.6 对 GPT 架构的更深入了解 GPT 最初由 OpenAI 的 Radford 等人在论文《通过生成式预训练提高语言理解能力》 中提出。GPT-3 是该模型的扩展版本,具有更多的参数,并且使用了更大的数据集进行训练。此外,ChatGPT 中提供的原始模型是通过在大…...
Android Zygote 启动流程梳理
和你一起终身学习,这里是程序员Android 本篇文章主要介绍 Android Zygote 启动分析 知识点,通过阅读本篇文章,您将收获以下内容: 一、Android 系统基本服务二、虚拟机创建和第一个Java 程序引导三、Dalvik 虚拟机基本配置四、Zygote 启动流程…...
华为OD机试-绘图机器-双指针(Java 2025 A卷 100分)
题目描述 绘图机器的绘图笔初始位置在原点 (0, 0)。机器启动后按照以下规则绘制直线: 尝试沿着横坐标正向绘制直线,直到给定的终点 E。期间可以通过指令在纵坐标轴方向进行偏移,offsetY 为正数表示正向偏移,为负数表示负向偏移。给定的横坐标终点值 E 以及若干条绘制指令,…...
ESP32(1)基于ESP32的lwIP了解
ESP32-S3 是一款集成了 Wi-Fi 和蓝牙功能的微控制器,而 lwIP(轻量级 IP)是一个为嵌入式系统设计的开源 TCP/IP 协议栈。通过使用 lwIP 库, ESP32-S3 可以实现与外部网络的通信,包括发送和接收数据包、处理网络连接等。…...
C语言预处理详解
目录 (一)预处理符号 (二)define定义常量和宏 (三)#符号和##符号 (四)undef符号的条件编译 (五)头文件的包括 (一)预处理符号 在…...
python实现接口自动化
代码实现自动化相关理论 代码编写脚本和工具实现脚本区别是啥? 代码: 优点:代码灵活方便缺点:学习成本高 工具: 优点:易上手缺点:灵活度低,有局限性。 总结: 功能脚本:工…...
当Anaconda的安装路径与我想创建的conda虚拟环境路径不一致时,应该怎么操作?
我的anaconda安装在该路径:D:\Program\anaconda3 , 如果我想在F盘创建一个虚拟环境 应该怎么做呢? 若你想在 F 盘创建 Anaconda 虚拟环境,可使用 conda create 命令,并通过 --prefix 参数指定环境路径。以下是详细步骤࿱…...
MongoDB慢日志查询及索引创建
MongoDB 的慢日志(Slow Query Log)对于运维和程序员来说都非常重要,因为它直接关系到数据库的性能和应用程序的稳定性。以下分享介绍下MongoDB慢日志查询及索引创建相关的一些笔记。 一,准备 1. 使用 db.currentOp() 实时监控 …...
C语言指针(详细总结)
目录 1.初始C指针 几个重要的概念: 指针的加减 &与* 二级指针 2.指针与数组 指针数组 数组指针变量 一维数组与二维数组传参的本质 编辑编辑 编辑 3.指针与函数 函数指针数组 4.指针与结构体 5.野指针以及常见的内存管理错误 常见的内存错…...
服务器部署Kong和Konga过程
前言 最近在想怎么将一个接口给外部提供服务,并且可以根据和对放的关系,设置不同的期限或者服务大小?并且有友好的可视化页面! 这让我了解到了 API 网关,所以我开始研究 Kong 和 Konga 的使用。 实际上我最开始研究的apisix,但是部署了好久因为etcd不支持 http 无法连接…...
stm32第五天按键的基础知识
一:按键连接示意图 按键控制LED灯 软件设计流程 初始化系统 o 初始化GPIO外设时钟 o 初始化按键和LED的引脚 • 检测按键输入电平来控制LED灯 o SW2控制灯开 。 SW3控制灯关 1:key.c工程 #include"key.h" #include"stm32f10x.h"v…...
高主频CPU+RTX4090:AI生图性能优化超150%
概述:消费级高主频CPU搭配 RTX 4090显卡可以显著提高AI生图的性能,相比于企业级CPU具有更大的吞吐量和更优的成本效益。 引言:在AI图像生成过程中,CPU与GPU的协同效应对系统的整体性能至关重要。测试表明,与RTX 4090显…...
自学Python创建强大AI:从入门到实现DeepSeek级别的AI
人工智能(AI)是当今科技领域最热门的方向之一,而Python是AI开发的首选语言。无论是机器学习、深度学习还是自然语言处理,Python都提供了丰富的库和工具。如果你梦想创建一个像DeepSeek这样强大的AI系统,本文将为你提供…...
主流区块链
文章目录 主流链1. Solana特点:适用场景:工具链: 2. Binance Smart Chain (BSC)特点:适用场景:工具链: 3. Avalanche特点:适用场景:工具链: 4. Polkadot特点:…...
DevEco Studio的使用
目录 1.创建ArkTS工程 2.ArkTS工程目录结构(Stage模型) 构建第一个页面 构建第二个页面 实现页面间的跳转 1.创建ArkTS工程 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择…...
Oracle 公布 Java 的五大新功能
Java 增强提案包括语言增强和性能优化,从 JDK 25 中的稳定值 API 开始。 随着JDK(Java 开发工具包)24刚刚全面上市,Oracle 提前透露了不久的将来即将推出的 Java 功能,包括增强原始装箱到空限制值类类型。 3 月 18 日…...
checkpoint机制
1、什么是checkpoint 将缓冲池中的脏页刷新到磁盘,并更新redo log的checkpoint位点,确保数据库在发生故障时可以快速恢复到一致的状态。 2、checkpoint执行过程 确保需要刷新的脏页:从缓冲池中选取一部分需要刷新的页数据页刷新࿱…...
MySQL函数大全(持续更新)
MySQL常用函数 一、字符串函数 函数功能 CONCAT(s1, s2, ...) 拼接字符串 CONCAT_WS(sep, s1, s2, ...) 指定分隔符拼接字符串 SUBSTRING(str, start, length) 截取字符串 LEFT(str, length) 从左边截取指定长度字符串 RIGHT(str, length) 从右边截取指定长度字符串 LENGTH(s…...
商业智能BI分析中,汽车4S销售行业的返厂频次有什么分析价值?
买过车的朋友会发现,同一款车不管在哪个4S店去买,基本上价格都相差不大。即使有些差别,也是带着附加条件的,比如要做些加装需要额外再付一下费用。为什么汽车4S销售行业需要商业智能BI?就是因为在汽车4S销售行业&#…...
51单片机程序变量作用域问题
问题: //为什么下面这个程序可以运行 #include <REGX52.H> #include "LCD1602.h" #include "Delay.h" unsigned int result 0; void main(){LCD_Init();while(1){LCD_ShowNum(1,1,result,3);Delay(200);result;}; } //但是这样会报错&a…...
力扣算法ing(33 / 100)
3.20 146.LRU缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值&…...
基于springboot的母婴商城系统(018)
摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…...
【数学建模】模糊综合评价模型详解、模糊集合论简介
模糊综合评价模型详解 文章目录 模糊综合评价模型详解1. 模糊综合评价模型概述2. 模糊综合评价的基本原理2.1 基本概念2.2 评价步骤 3. 模糊综合评价的数学模型3.1 数学表达3.2 模糊合成运算 4. 模糊综合评价的应用领域5. 模糊综合评价的优缺点5.1 优点5.2 缺点 6. 模糊综合评价…...
BSCAN2-1:load design
1. DFT Flow Using Tessent Shell Tessent BoundaryScan 具有一个基本的高层次流程顺序。下图展示了将 Tessent BoundaryScan 插入设计所需的高层次步骤顺序。图中的每个步骤都链接到有关可测试性设计(DFT)流程的更详细信息,包括示例。 Desi…...
Pytorch中layernorm实现详解
平时我们在编写神经网络时,经常会用到layernorm这个函数来加快网络的收敛速度。那layernorm到底在哪个维度上进行归一化的呢? 一、问题描述 首先借用知乎上的一张图,原文写的也非常好,大家有空可以去阅读一下,链接放…...
Redis HyperLogLog
Redis HyperLogLog HyperLogLog 是 Redis 提供的一种基数估算(Cardinality Estimation)数据结构,专门用于统计去重元素的数量(近似值)。 1. HyperLogLog 特点 ✅ 节省内存:无论存储的元素有 10 个 还是 …...
【微服务日志收集①】使用FileBeat+Logstash+ES搭建ELK日志系统
使用FileBeatLogstashES搭建ELK日志系统,架构图如下: 1、 使用docker快速创建ES服务和Kibana服务 前置条件:需要在linux上提前安装好docker和docker-compose 1.1、在linux创建好一个用于存放docker-compose配置文件的文件夹 我的目录是/app/…...
【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(10)
1.问题描述: 离线推送,锁屏的时候没有弹出消息,只有下拉在通知中心里面显示。请问是否是正常的? 解决方案: 检查一下是否存在图片风控:https://developer.huawei.com/consumer/cn/doc/harmonyos-referen…...
Django之旅:第二节--启动运行django
1、确保app已配置完(settings.py文件里面配置) INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.staticfiles,app.apps.AppConfig #配置已经注册好的app…...
Redis Sentinel(哨兵模式)高可用性解决方案
一、概述 Redis Sentinel(哨兵模式)是Redis的高可用性(High Availability, HA)解决方案,它通过哨兵系统和Redis实例的协同工作,确保了Redis服务的高可用性和数据的持久性。哨兵系统由一个或多个哨兵进程组…...
Redis缓存与数据库 数据一致性保障
为什么要保证数据一致性 只要使用redis做缓存,就必然存在缓存和DB数据一致性问题。若数据不一致,则业务应用从缓存读取的数据就不是最新数据,可能导致严重错误。比如将商品的库存缓存在Redis,若库存数量不对,则下单时…...
Grid 布局实现三栏布局
使用 CSS Grid 布局实现三栏布局(左右固定 100px,中间自适应)的核心原理是通过网格模板精确控制列宽分配。以下是具体实现方法及优化技巧: 一、基础实现 父容器设置 为外层容器添加 display: grid 使其成为网格容器,并通过 grid-template-columns 定义列宽 css .contain…...
如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同?
大白话如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同? 1. HTML 中有序列表和无序列表的基本概念 在 HTML 里,列表是一种用来组织信息的方式。有序列表就是带有编号的列表,它可以让内容按照一定的顺序呈现&#…...
springboot第三站(1) web开发引入
目录 1.简介 2.SpringBoot对静态资源的映射规则 3.模版引擎 1.简介 使用SpringBoot; 1)、创建SpringBoot应用,选中我们需要的模块; 2)、SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定…...
nginx 简单实践:负载均衡【nginx 实践系列之四】
〇、前言 本文为 nginx 简单实践系列文章之三,主要简单实践了负载均衡,仅供参考。 注意:可以使用测试域名,但前提是要修改 hosts 文件 路径和重启:Linux(/etc/hosts)(重启命令&#…...
CentOS 7.9 安装 Python 3.10 详细步骤及常见问题解决
一、环境准备与依赖安装 更新系统与开发工具 sudo yum update -y sudo yum groupinstall "Development Tools" -y sudo yum install -y zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel \ readline-devel tk-devel libffi-devel gdbm-devel db4-de…...
计算机网络-1-1计算机网络体系结构
第一章计算机网络体系结构 绪论 《计算机网络》学什么?——数据如何通过网络正确、可靠地从A传送到B 【考纲内容】 (一)计算机网络概述 计算机网络的概念、组成与功能;计算机网络的分类; 计算机网络的性能指标 (二)计算机网…...
集装箱箱号OCR识别技术,在铁路物流场站集装箱装卸机械数字化系统中的应用
集装箱装卸机械数字化是针对铁路物流场站的门式起重机、集装箱正面吊运起重机、重型叉车、堆高机等作业设备,在不影响原设备作业性能情况下,通过增加或集成集装箱箱号OCR识别或者车号识别装置、北斗定位装置、PLC采集装置等,利用多种通信协议…...
数仓工具—Hive语法之不同纬度聚合
不同纬度聚合 提到不同纬度聚合,大家想到的肯定是grouping sets,或者是cube和rollup 其实这些我们之前都讲过,可以看看之前的文章 数仓工具—Hive语法之cube和rollup 数仓工具—Hive语法之grouping sets 但是我们今天遇到的问题是,使用的工具不支持grouping sets,既然…...
GitHub在push推送到远程仓库的时候显示Logon failed登录失败
具体问题描述 git.exe push --progress "origin" master:master Logon failed, use ctrlc to cancel basic credential prompt. remote: Support for password authentication was removed on August 13, 2021. 这是因为Git 推送失败的原因是 GitHub 已经不支持密码认…...
【Dive Into Stable Diffusion v3.5】1:开源项目正式发布——深入探索SDv3.5模型全参/LoRA/RLHF训练
目录 1 引言2 项目简介3 快速上手3.1 下载代码3.2 环境配置3.3 项目结构3.4 下载模型与数据集3.5 运行指令3.6 核心参数说明3.6.1 通用参数3.6.2 优化器/学习率3.6.3 数据相关 4 结语 1 引言 在人工智能和机器学习领域,生成模型的应用越来越广泛。Stable Diffusion…...
2025-03-19 Unity 网络基础2——网络通信基础
文章目录 1 数据通信模型1.1 C/S 模型1.2 B/S 模型1.3 P2P 模型1.4 小结 2 网络协议2.1 OSI 模型2.1.1 下层2.1.2 上层 2.2 TCP/IP 协议2.2.1 TCP 协议2.2.2 UDP 协议 3 网络游戏通信方案3.1 强/弱弱联网游戏3.2 长/短连接游戏3.3 相关术语 1 数据通信模型 在早期的计算机网…...
路由器安全研究:D-Link DIR-823G v1.02 B05 复现与利用思路
前言 D-Link DIR-823G v1.02 B05存在命令注入漏洞,攻击者可以通过POST的方式往 /HNAP1发送精心构造的请求,执行任意的操作系统命令。 漏洞分析 binwalk提取固件,成功获取到固件。 现在我们已经进入到应用里了,那么我们在进行分析…...
【蓝桥杯python研究生组备赛】005 数学与简单DP
题目1 01背包 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi,价值是 wi。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输出最大价值。 输入格式 第一行两个整数&a…...
数据仓库是什么,跟数据集成有什么关系
在当今数字化时代,数据已成为企业决策的重要依据。数据仓库作为企业数据管理的核心组件,其重要性不言而喻。那么,数据仓库到底是什么?它与数据集成又有着怎样的关系呢?本文将深入探讨这些问题。 一、数据仓库…...
鸿蒙NEXT项目实战-百得知识库01
代码仓地址,大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点: 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…...