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

vue3实现pdf文件预览 - vue-pdf-embed

参考地址:https://juejin.cn/post/7105933034771185701
这个参考文章的代码直接可以复制使用,样式也是给到的,但是实现的是一页一页的显示pdf内容,我的需求是要全部展示出来,页码切换时是做一个滚动定位操作。

思路:

  1. 通过vue3-pdfjs插件提供的方法createLoadingTask获取到总页码numPages,通过循环将所有页面渲染
  2. 页码定位通过锚点定位方式实现。

安装插件:

 npm install vue-pdf-embed@1.1.6npm install vue3-pdfjs

注意:vue-pdf-embed使用1.1.6版本,之前未固定版本出现内容不显示问题(大概1版本的可以,2版本的不行,我这边使用的是1.1.6版本)。

完整代码:

<template><div class="pdf-preview-container"><!-- 头部导航栏 --><div class="pdf-header"><div class="page-navigation"><div class="page-controls"><!-- 上一页按钮 --><el-button link :disabled="state.pageNum <= 1" @click="prevPage"><el-icon><ArrowUp /></el-icon></el-button><!-- 页码输入框 --><el-input v-model.number="state.pageNum" class="page-input" @keyup.enter="goToPage" @blur="goToPage" /><!-- 下一页按钮 :disabled="currentPage >= totalPages" --><el-button link @click="nextPage"><el-icon><ArrowDown /></el-icon></el-button></div><!-- 总页数 --><span class="total-pages">/&nbsp;&nbsp;{{ state.numPages }}</span></div></div><!-- PDF预览区域 --><div class="pdf-content"><!-- PDF内容显示区域 --><div class="pdf-display-area"><div v-for="item in state.numPages" :key="item" class='pdf-item' :id="`pdf-page-${item}`"><vue-pdf-embed :source="state.source" class="vue-pdf-embed" :page="item" /></div></div></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, computed, reactive } from 'vue';
import { Close, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";const pdfFile = 'https://pic2-cdn.trytalks.com/pic2/202507091052/files_1a1b765ec00125e0FfuRNLZz.pdf?Expires=1754621583&OSSAccessKeyId=LTAI5tQd3SECCekgpXLBnQSo&Signature=nUn9kW375rdiVNHi2wdDLDm0gAM%3D'const state = reactive({source: pdfFile, // 预览pdf文件地址pageNum: 1, // 当前页面scale: 1, // 缩放比例numPages: 0, // 总页数
});const loadingTask: any = ref(null)const pdfInit = () => {loadingTask.value = createLoadingTask(state.source);loadingTask.value.promise.then((pdf: { numPages: number }) => {state.numPages = pdf.numPages;});
}// 滚动到指定页面
let isManualNavigation = false;
const scrollToPage = (page: number) => {// 设置手动导航标志isManualNavigation = true;// 先立即更新页码状态const validPage = Math.max(1, Math.min(page, state.numPages));state.pageNum = validPage;// 执行滚动const element = document.getElementById(`pdf-page-${validPage}`);if (element) {element.scrollIntoView({behavior: 'smooth',block: 'start'});}// 滚动结束后清除标志setTimeout(() => {isManualNavigation = false;}, 1000);
};// 上一页
const prevPage = (): void => {if (state.pageNum > 1) {scrollToPage(state.pageNum - 1);}
};// 下一页
const nextPage = (): void => {const nextPage = state.pageNum + 1;if (nextPage <= state.numPages) {scrollToPage(nextPage);}
};// 跳转到指定页
const goToPage = (): void => {// 确保输入是有效数字let page = parseInt(String(state.pageNum));if (isNaN(page) || page < 1) {page = 1;} else if (page > state.numPages) {page = state.numPages;}// 更新输入框显示正确的页码state.pageNum = page;scrollToPage(page);
};// 处理滚动事件,更新当前页码(带防抖)
let scrollTimeout: number | null = null;
const handleScroll = () => {// 如果是手动导航触发的滚动,则不更新页码if (isManualNavigation) return;if (scrollTimeout) {clearTimeout(scrollTimeout);}scrollTimeout = setTimeout(() => {const container = document.querySelector('.pdf-content');if (!container) return;const scrollPosition = container.scrollTop;const items = document.querySelectorAll('.pdf-item');const containerHeight = container.clientHeight;const threshold = containerHeight * 0.3; // 30%视口高度作为阈值let currentPage = state.pageNum;// 精确检测当前可见页面items.forEach((item) => {const pageNum = parseInt(item.id.replace('pdf-page-', ''));const rect = item.getBoundingClientRect();// 如果页面顶部在视口阈值范围内,则认为是当前页if (rect.top >= -threshold && rect.top <= threshold) {currentPage = pageNum;}});// 只有当页码确实变化时才更新if (currentPage !== state.pageNum) {state.pageNum = currentPage;}}, 150) as unknown as number; // 适当增加防抖时间
};// 组件挂载时
onMounted(() => {// 检查浏览器PDF支持const isPdfSupported = 'application/pdf' in navigator.mimeTypes;console.log('浏览器原生支持PDF:', isPdfSupported);// 添加滚动事件监听const contentEl = document.querySelector('.pdf-content');if (contentEl) {contentEl.addEventListener('scroll', handleScroll);}pdfInit();
});onBeforeUnmount(() => {// 移除滚动事件监听const contentEl = document.querySelector('.pdf-content');if (contentEl) {contentEl.removeEventListener('scroll', handleScroll);}
});
</script><style lang="scss" scoped>
.pdf-preview-container {display: flex;flex-direction: column;height: 100%;background-color: #fff;border-radius: 4px;overflow: hidden;.pdf-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 16px;background-color: #fff;border-bottom: 1px solid #e0e0e0;.back-button {cursor: pointer;display: inline-block;padding: 5px 5px 0px;border-radius: 4px;transition: background-color 0.2s;&:hover {background-color: #f0f0f0;}}.pdf-actions {display: flex;gap: 10px;}.page-navigation {display: flex;align-items: center;.page-controls {display: flex;align-items: center;padding: 2px 8px;.page-input {width: 50px;margin: 0 5px;:deep(.el-input__inner) {text-align: center;padding: 0 5px;}}}.total-pages {margin-left: 5px;color: #606266;}}}.pdf-content {flex: 1;overflow: auto;/* 自定义滚动条样式 */&::-webkit-scrollbar {width: 6px;height: 6px;}&::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.05);border-radius: 3px;}&::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.15);border-radius: 3px;transition: background 0.2s;&:hover {background: rgba(0, 0, 0, 0.25);}}.pdf-loading,.pdf-error {height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}.pdf-display-area {.pdf-item {margin: 16px 0px;}}}
}
</style>
http://www.dtcms.com/a/272169.html

相关文章:

  • 力扣热门算法题 127.单词接龙,128.最长连续序列,130.被围绕的区域
  • MySQL数据库基础教程:从安装到数据操作
  • 快速合并多个CAD图形为单一PDF文档的方法
  • 常见 Docker 错误及解决方法
  • (vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json
  • 基于Catboost算法的茶叶数据分析及价格预测系统的设计与实现
  • 多元函数的切平面与线性近似:几何直观与计算方法
  • 高数附录(1)—常用平面图形
  • 《O-PAS™标准的安全方法》白皮书:为工业自动化系统筑起安全防线
  • msf复现永恒之蓝
  • 每日一SQL 【各赛事的用户注册率】
  • Datawhale AI 夏令营:基于带货视频评论的用户洞察挑战赛 Notebook(下篇)
  • 流媒体服务
  • SIMATIC S7-1200的以太网通信能力:协议与资源详细解析
  • x86架构CPU市场格局
  • WIFI协议全解析05:WiFi的安全机制:IoT设备如何实现安全连接?
  • PHP安全编程实践系列(三):安全会话管理与防护策略
  • 【运维】串口、网络一些基本信息
  • 【超详细】CentOS系统Docker安装与配置一键脚本(附镜像加速配置)
  • Pinia 笔记:Vue3 状态管理库
  • 双模秒切,体验跃迁!飞利浦EVNIA双模游戏显示器27M2N6801M王者降临!
  • UnrealEngine5游戏引擎实践(C++)
  • 如何将多个.sql文件合并成一个:Windows和Linux/Mac详细指南
  • 字节 Seed 团队联合清华大学智能产业研究院开源 MemAgent: 基于多轮对话强化学习记忆代理的长文本大语言模型重构
  • 为了安全应该使用非root用户启动nginx
  • 相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
  • [Xmos] Xmos架构
  • 从面向对象编程语言PHP转到Go时的一些疑惑?
  • 同时部署两个不同版本的tomcat要如何配置环境变量
  • Xavier上安装RTSP服务端教程