附件预览调整测试

src/components/preview/pdfViewer.vue

@@ -7,15 +7,8 @@
 </template>
 
 <script>
-// import { getDocument } from 'pdfjs-dist/build/pdf'; // 用于加载文档
-import * as pdfjsLib from 'pdfjs-dist/web/pdf_viewer'; // 获取全局配置接口
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
-import workerBundle from 'pdfjs-dist/build/pdf.worker.entry';
-
-// ✅ 关键配置：显式设置Worker路径并启用中文字体支持
-GlobalWorkerOptions.workerSrc = workerBundle.default;
-GlobalWorkerOptions.cMapUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/cmaps/';
-GlobalWorkerOptions.cMapPacked = true;
+import { getDocument } from 'pdfjs-dist/build/pdf'; // 确保使用最新API
+import * as pdfjsLib from 'pdfjs-dist';              // 全局命名空间备用
 
 export default {
   name: "pdfViewer",
@@ -31,34 +24,21 @@ export default {
       errorMsg: null
     };
   },
+  created() {
+    // ✅ 关键：提前注册Worker以避免竞态条件
+    pdfjsLib.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');
+  },
   async mounted() {
     try {
-      const docPromise = getDocument({ url: this.src, withCredentials: true });
-      this.pdfDoc = await docPromise.promise;
-      await this.renderPage(1); // 默认加载第一页
+      const doc = await getDocument({ url: this.src, withCredentials: true }).promise;
+      this.pdfDoc = doc;
+      await this.renderPage(this.pageNum);
+      this.loading = false;
     } catch (err) {
-      console.error("PDF加载失败:", err); // 此处应能捕获到具体的错误堆栈
+      console.error("🔍 详细错误堆栈:", err); // 输出完整错误上下文
+      this.errorMsg = `加载失败 · ${err.message}`;
+      this.loading = false;
     }
-    // try {
-    //   // ✅ 关键步骤：动态加载 Worker 脚本并设置路径
-    //   const workerBundle = await import('pdfjs-dist/build/pdf.worker.entry');
-    //   pdfjsLib.GlobalWorkerOptions.workerSrc = workerBundle.default;
-    //
-    //   // 可选：配置中文字体支持（解决乱码问题）
-    //   pdfjsLib.GlobalWorkerOptions.cMapUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/cmaps/';
-    //   pdfjsLib.GlobalWorkerOptions.cMapPacked = true;
-    //
-    //   // 发起文档加载请求
-    //   console.log(this.src,'src浏览的地址内容')
-    //   const docPromise = getDocument({ url: this.src, withCredentials: true });
-    //   this.pdfDoc = await docPromise.promise;
-    //   await this.renderPage(this.pageNum); // 触发渲染
-    //   this.loading = false;
-    // } catch (err) {
-    //   console.error("PDF初始化失败:", err);
-    //   this.errorMsg = `无法加载PDF文件 (${err.message})`;
-    //   this.loading = false;
-    // }
   },
   methods:{
     async loadNewDocument(newSrc) { // 新增的核心方法！