hookehuyr

feat(pdf): 添加pdf-vue3依赖并实现新版PDF查看组件

添加pdf-vue3依赖包用于PDF文件预览
创建PdfViewer组件替换原有PdfPreview组件
优化PDF加载性能并添加进度显示和错误处理
在StudyDetailPage中使用新组件并添加文件大小显示
......@@ -35,6 +35,7 @@
"browser-md5-file": "^1.1.1",
"dayjs": "^1.11.13",
"lodash": "^4.17.21",
"pdf-vue3": "^1.0.12",
"swiper": "^11.2.6",
"uuid": "^11.1.0",
"vant": "^4.9.19",
......
......@@ -18,6 +18,7 @@ declare module 'vue' {
CourseCard: typeof import('./components/ui/CourseCard.vue')['default']
CourseImageCard: typeof import('./components/ui/CourseImageCard.vue')['default']
CourseList: typeof import('./components/courses/CourseList.vue')['default']
FilePreviewPopup: typeof import('./components/ui/FilePreviewPopup.vue')['default']
FormPage: typeof import('./components/infoEntry/formPage.vue')['default']
FrostedGlass: typeof import('./components/ui/FrostedGlass.vue')['default']
GradientHeader: typeof import('./components/ui/GradientHeader.vue')['default']
......@@ -25,6 +26,7 @@ declare module 'vue' {
MenuItem: typeof import('./components/ui/MenuItem.vue')['default']
OfficeViewer: typeof import('./components/ui/OfficeViewer.vue')['default']
PdfPreview: typeof import('./components/ui/PdfPreview.vue')['default']
PdfViewer: typeof import('./components/ui/PdfViewer.vue')['default']
ReviewPopup: typeof import('./components/courses/ReviewPopup.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
......@@ -79,12 +79,29 @@ const initPdfViewer = () => {
// customPdfOption是 pdfjs getDocument 函数中一些配置参数 具体可参考 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters
cMapPacked: true, //指定 CMap 是否是二进制打包的
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/", //预定义 Adob​​e CMaps 所在的 URL。可解决字体加载错误
// 内存优化配置
disableAutoFetch: true, // 启用自动获取,提升加载速度
disableStream: true, // 启用流式加载
disableRange: true, // 启用范围请求,支持分片下载
// maxImageSize: 1 * 1024 * 1024, // 限制图片最大尺寸为1MB
isEvalSupported: false, // 禁用eval,提升安全性和性能
// 启用懒加载,减少内存占用
enableXfa: true, // 禁用XFA表单支持,减少内存占用
// 添加更多性能优化配置
useOnlyCssZoom: true, // 仅使用CSS缩放,减少重新渲染
verbosity: 0, // 减少日志输出,提升性能
// 微信浏览器优化配置
useWorkerFetch: true, // 在微信浏览器中禁用Worker fetch,避免兼容性问题
disableFontFace: true, // 保持字体渲染,但可能需要根据情况调整
// 内存管理配置
pdfBug: true, // 禁用调试模式,减少内存占用
stopAtErrors: true, // 不要在错误时停止,让错误回调处理
},
// 禁用右键菜单和文本选择
selectConfig: undefined, // 禁用文本选择功能
}
});
// 添加额外的事件监听器来防止长按保存
const pdfContainer = document.querySelector("#pdf-container");
if (pdfContainer) {
......@@ -93,13 +110,13 @@ const initPdfViewer = () => {
e.preventDefault();
return false;
});
// 防止长按选择
pdfContainer.addEventListener('selectstart', (e) => {
e.preventDefault();
return false;
});
// 防止拖拽
pdfContainer.addEventListener('dragstart', (e) => {
e.preventDefault();
......
This diff is collapsed. Click to expand it.
......@@ -261,7 +261,7 @@
</van-popup>
<!-- PDF预览 -->
<PdfPreview v-model:show="pdfShow" :url="pdfUrl" :title="pdfTitle" @onLoad="onPdfLoad" />
<PdfViewer v-model:show="pdfShow" :url="pdfUrl" :title="pdfTitle" @onLoad="onPdfLoad" @onProgress="onPdfProgress" @onComplete="onPdfComplete" />
<!-- Office 文档预览弹窗 -->
<van-popup
......@@ -536,6 +536,7 @@
<div class="flex items-center gap-1">
<van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/>
<span>{{ getFileType(file.title || file.name) }}</span>
<span class="ml-2">{{ file.size ? (file.size / 1024 / 1024).toFixed(2) + 'MB' : '' }}</span>
</div>
<!-- 复制地址按钮 -->
<!-- <button
......@@ -656,7 +657,7 @@ import { formatDate, wxInfo } from '@/utils/tools'
import axios from 'axios';
import { v4 as uuidv4 } from "uuid";
import { useIntersectionObserver } from '@vueuse/core';
import PdfPreview from '@/components/ui/PdfPreview.vue';
import PdfViewer from '@/components/ui/PdfViewer.vue';
import { showToast } from 'vant';
// 导入接口
......@@ -986,6 +987,21 @@ const onPdfLoad = (load) => {
};
/**
* PDF下载进度回调
* @param {number} progress - 下载进度 0-100
*/
const onPdfProgress = (progress) => {
// console.log('PDF下载进度:', progress);
};
/**
* PDF下载完成回调
*/
const onPdfComplete = () => {
// console.log('PDF下载完成');
};
/**
* Office 文档渲染完成回调
*/
const onOfficeRendered = () => {
......
......@@ -2124,6 +2124,11 @@ pathe@^2.0.1, pathe@^2.0.2, pathe@^2.0.3:
resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
pdf-vue3@^1.0.12:
version "1.0.12"
resolved "https://registry.npmjs.org/pdf-vue3/-/pdf-vue3-1.0.12.tgz#8b2c4346cd75a7d3307aa6117c591c047549f4ed"
integrity sha512-7SMTx1RfRwdc+2WPniDzqM8MxJLqTNNzdyV0SeQTxeRLJGndb5Wv/fz5afO13oBSIvvaqcbZ/S3gF+XjqkSb9g==
pdfjs-dist@3.4.120:
version "3.4.120"
resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-3.4.120.tgz#6f4222117157498f179c95dc4569fad6336a8fdd"
......