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

添加pdf-vue3依赖包用于PDF文件预览创建PdfViewer组件替换原有PdfPreview组件优化PDF加载性能并添加进度显示和错误处理在StudyDetailPage中使用新组件并添加文件大小显示

feat(pdf): 添加pdf-vue3依赖并实现新版PDF查看组件
添加pdf-vue3依赖包用于PDF文件预览创建PdfViewer组件替换原有PdfPreview组件优化PDF加载性能并添加进度显示和错误处理在StudyDetailPage中使用新组件并添加文件大小显示
hookehuyr
Commit adbdf240d33db796fbd1f2d8e7f4c7080e7cfa63 adbdf240 1 parent 6bb8ba5e
Showing 6 changed files with 46 additions and 5 deletions
package.json
src/components.d.ts
src/components/ui/PdfPreview.vue
src/components/ui/PdfViewer.vue
src/views/study/StudyDetailPage.vue
yarn.lock
--- a/package.json
View file @adbdf24
+++ b/package.json
View file @adbdf24
@@ -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",
--- a/src/components.d.ts
View file @adbdf24
+++ b/src/components.d.ts
View file @adbdf24
@@ -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']
--- a/src/components/ui/PdfPreview.vue
View file @adbdf24
+++ b/src/components/ui/PdfPreview.vue
View file @adbdf24
@@ -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/", //预定义 Adobe 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();
--- a/src/components/ui/PdfViewer.vue 0 → 100644
View file @adbdf24
+++ b/src/components/ui/PdfViewer.vue 0 → 100644
View file @adbdf24
--- a/src/views/study/StudyDetailPage.vue
View file @adbdf24
+++ b/src/views/study/StudyDetailPage.vue
View file @adbdf24
@@ -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 = () => {
--- a/yarn.lock
View file @adbdf24
+++ b/yarn.lock
View file @adbdf24
@@ -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"