pdf打开彩页

myPackageA/compare-result/compare-result.vue

@@ -83,6 +83,29 @@
                   <uni-icons type="file-pdf" size="18" color="#cc66ff"></uni-icons>
                   <uni-icons type="file-pdf" size="18" color="#cc66ff"></uni-icons>
                   <text class="file-name">{{ file.fileName }}</text>
                   <text class="file-name">{{ file.fileName }}</text>
                 </view>
                 </view>
+                <!-- 使用pdfjs打开 -->
+                 <view class="popup" v-if="pdfShow">
+                    <view class="popup-header">
+                        <text>PDF预览</text>
+                        <text class="close" @click="pdfShow = false">关闭</text>
+                    </view>
+                    <view class="popup-content">
+                      <PdfViewer 
+                        :pdfInfo="{
+                          title: null,
+                          url: viewFileUrl,
+                          landscapeFlag:false
+                        }"
+                        :autoLoad="index === 0" 
+                        :lazyLoad="true"
+                        :maxRetryCount="2"
+                        @loadComplete="handlePdfLoadComplete"
+                        @loadError="handlePdfLoadError"
+                        @pageChange="handlePageChange"
+                      />
+                    </view>
+            
+                </view>
               </view>
               </view>
             </view>
             </view>
           </view>
           </view>
@@ -103,6 +126,8 @@ import { ref, computed, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useRouter, useRoute } from 'vue-router';
 import common from '@/common/common';
 import common from '@/common/common';
 import api from '@/api/api';
 import api from '@/api/api';
+// 导入PDF查看器组件
+import PdfViewer from '@/components/pdf-viewer/pdf-viewer.vue';
 // 路由实例
 // 路由实例
 const router = useRouter();
 const router = useRouter();
 const route = useRoute();
 const route = useRoute();
@@ -117,6 +142,7 @@ const productPKInfoList = ref([]);
 const showOnlyDiff = ref(false);
 const showOnlyDiff = ref(false);
 // 查看文件的URL
 // 查看文件的URL
 const viewFileUrl = ref()
 const viewFileUrl = ref()
+const pdfShow = ref(false)
 
 
 // 根据分组编码获取对应的图标
 // 根据分组编码获取对应的图标
 const getGroupIcon = (groupCode) => {
 const getGroupIcon = (groupCode) => {
@@ -176,6 +202,9 @@ const getUrl = (fileUrl) => {
   if (!fileUrl) {
   if (!fileUrl) {
     uni.showToast({ title: '暂无文档', icon: 'none' });
     uni.showToast({ title: '暂无文档', icon: 'none' });
     return;
     return;
+  }else{
+    this.pdfShow = true
+    this.viewFileUrl = fileUrl
   }
   }
 
 
   // 区分环境：H5 端直接打开 URL，其他端用原下载逻辑
   // 区分环境：H5 端直接打开 URL，其他端用原下载逻辑
@@ -257,6 +286,23 @@ const navigateToPKPage = () => {
 	uni.navigateBack()
 	uni.navigateBack()
 
 
 };
 };
+// ========================== 事件处理 ==========================
+const handlePdfLoadComplete = (url: string, pageCount: number) => {
+  console.log(`PDF加载完成: ${url}, 共 ${pageCount} 页`);
+};
+
+const handlePdfLoadError = (url: string, error: Error) => {
+  console.error(`PDF加载失败: ${url}`, error);
+  uni.showToast({
+    title: 'PDF加载失败',
+    icon: 'none',
+    duration: 2000
+  });
+};
+
+const handlePageChange = (currentPage: number, totalPages: number) => {
+  console.log(`页面变化: ${currentPage}/${totalPages}`);
+};
 
 
 // 初始化数据
 // 初始化数据
 onMounted(() => {
 onMounted(() => {
@@ -488,4 +534,15 @@ onMounted(() => {
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
 }
 }
+.popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+}
 </style>
 </style>