feat: 保持PDF组件一致

apps/mobile/index.html

@@ -133,7 +133,5 @@
       src="/common-module/chart-module/js/chart-common.js?v=<%= assets.version %>"
     ></script>
     <% } %>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/pdfjs-dist/2.1.266/build/pdf.min.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/pdfjs-dist/2.1.266/web/pdf_viewer.js"></script>
   </body>
 </html>

apps/mobile/src/views/article/components/PDF.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="pdf-box">
-    <van-loading v-if="loading" size="32px" vertical>加载中</van-loading>
+    <van-loading v-if="useLoading && loading" size="32px" vertical
+      >加载中</van-loading
+    >
     <div v-show="isRender" id="pdf-canvas" style="height: 100%; width: 100%">
-      <div class="pagination-container">
+      <div class="pagination-container" v-show="usePagination">
         <span class="pagination-now">1</span>
         <em>/</em>
         <span class="pagination-total"></span>
@@ -30,6 +32,14 @@ export default {
     [Loading.name]: Loading
   },
   props: {
+    useLoading: {
+      type: Boolean,
+      default: true
+    },
+    usePagination: {
+      type: Boolean,
+      default: true
+    },
     url: {
       type: String,
       default: ''

apps/mobile/src/views/common/pdfViewExample.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="pdf-view-example j-contanter">
-    <div id="pdf-view-container" class="j-main" />
+    <div class="j-main">
+      <PDF
+        v-if="pdfUrl"
+        :useLoading="false"
+        :usePagination="false"
+        :url="pdfUrl"
+      ></PDF>
+    </div>
     <div v-if="!getUserId" class="j-footer">
-      <a href="/jyapp/free/login?url=/jy_mobile/order/create/creditreport&activity=bidCreditReportPreview" class="adsense-container">
+      <a
+        href="/jyapp/free/login?url=/jy_mobile/order/create/creditreport&activity=bidCreditReportPreview"
+        class="adsense-container"
+      >
         <AdSingle
           ad="app-credit-report-sample"
           :show-tag="false"
@@ -18,11 +28,13 @@
 import { mapGetters } from 'vuex'
 import AdSingle from '@/components/ad/Ad'
 import { getAssetsFile } from '@/utils'
+import PDF from '@/views/article/components/PDF.vue'
 
 export default {
   name: 'PdfViewExample',
   components: {
-    AdSingle
+    AdSingle,
+    PDF
   },
   data() {
     return {
@@ -51,22 +63,21 @@ export default {
     const { pdfUrl } = this.$route.query
     if (pdfUrl) {
       this.pdfUrl = decodeURIComponent(pdfUrl)
-    }
-    else {
+    } else {
       const pdfAssets = getAssetsFile('example-min.pdf')
       // this.pdfUrl = 'https://cdn-common.jianyu360.cn/cdn/assets/file/example.pdf'
       this.pdfUrl = pdfAssets
     }
   },
   mounted() {
-    const container = document.getElementById('pdf-view-container')
-
-    this.loadPdf(this.pdfUrl, container)
-    // 监听窗口的 resize 事件，实现自适应效果
-    window.addEventListener('resize', () => {
-      container.innerHTML = ''
-      this.loadPdf(this.pdfUrl, container)
-    })
+    // const container = document.getElementById('pdf-view-container')
+    //
+    // this.loadPdf(this.pdfUrl, container)
+    // // 监听窗口的 resize 事件，实现自适应效果
+    // window.addEventListener('resize', () => {
+    //   container.innerHTML = ''
+    //   this.loadPdf(this.pdfUrl, container)
+    // })
   },
   methods: {
     async loadPdf(pdfUrl, container) {
@@ -97,15 +108,17 @@ export default {
         this.$toast.clear()
         // 监听滚动事件
         container.addEventListener('scroll', () => this.handleScroll(container))
-      }
-      catch (error) {
+      } catch (error) {
         console.error('Error loading PDF:', error)
       }
     },
     async loadBatchPages(container) {
       // 加载当前页码开始的连续多页，这里以5页为例
       // 分批加载，从当前页码开始，最多加载5页
-      const endPage = Math.min(this.currentPage + this.batchSize - 1, this.totalPages)
+      const endPage = Math.min(
+        this.currentPage + this.batchSize - 1,
+        this.totalPages
+      )
       for (let pageNum = this.currentPage; pageNum <= endPage; pageNum++) {
         const page = await this.pdf.getPage(pageNum)
         const viewport = page.getViewport({ scale: this.calculateScale(page) })
@@ -117,14 +130,15 @@ export default {
 
         await page.render({
           canvasContext: ctx,
-          viewport,
+          viewport
         }).promise
       }
       this.currentPage = endPage + 1 // 更新当前页码
     },
     handleScroll(container) {
       const { scrollTop, scrollHeight, clientHeight } = container
-      if (scrollTop + clientHeight >= scrollHeight - 100) { // 当滚动到底部附近时
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
+        // 当滚动到底部附近时
         if (this.currentPage <= this.totalPages) {
           this.loadBatchPages(container)
         }
@@ -132,7 +146,8 @@ export default {
     },
     // 计算缩放比例以适应容器宽度
     calculateScale(page) {
-      const containerWidth = document.getElementById('pdf-view-container').clientWidth
+      const containerWidth =
+        document.getElementById('pdf-view-container').clientWidth
       const viewport = page.getViewport({ scale: 1 })
       // 增加一个倍数来提高清晰度，例如 1.5
       return (containerWidth / viewport.width) * 3
@@ -140,3 +155,12 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.pdf-view-example {
+  ::v-deep {
+    .pdf-box {
+      height: 100%;
+    }
+  }
+}
+</style>