feat: pdf预览

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/mobile/package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@jy/data-models": "workspace:^",
+    "@jy/plugin-bind-phone": "workspace:^",
     "@jy/util": "workspace:^",
     "@jy/vue-anti": "workspace:^",
-    "@jy/plugin-bind-phone": "workspace:^",
     "@sentry/vue": "^7.64.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "aliyun_numberauthsdk_web": "^2.1.9",
@@ -28,6 +28,7 @@
     "lottie-web": "^5.12.0",
     "moment": "^2.29.1",
     "pdfh5": "^1.4.9",
+    "pdfjs-dist": "^5.1.91",
     "qs": "^6.11.2",
     "rgbaster": "^2.1.1",
     "svga": "^2.0.6",

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

@@ -1,9 +1,7 @@
 <template>
   <div class="pdf-view-example j-contanter">
-    <div class="pdf-container j-main">
-      <object :data="pdfUrl" type="application/pdf" width="100%" height="100%">
-        <p>PDF 无法显示，请下载查看：<a :href="pdfUrl">下载 PDF</a></p>
-      </object>
+    <div class="pdf-view-container j-main">
+      <div id="pdf-container" />
     </div>
     <div v-if="!getUserId" class="j-footer">
       <a href="/jyapp/free/login?back=index&to=back&activity=bidCreditReportPreview" class="adsense-container">
@@ -20,8 +18,10 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import * as pdfjsLib from 'pdfjs-dist/build/pdf'
 import AdSingle from '@/components/ad/Ad'
 import { getAssetsFile } from '@/utils'
+import 'pdfjs-dist/build/pdf.worker.mjs'
 
 export default {
   name: 'PdfViewExample',
@@ -30,7 +30,9 @@ export default {
   },
   data() {
     return {
-      pdfUrl: ''
+      pdfUrl: '',
+      pdf: null,
+      totalPages: 0
     }
   },
   computed: {
@@ -42,8 +44,54 @@ export default {
       this.pdfUrl = decodeURIComponent(pdfUrl)
     }
     else {
-      const pdf = getAssetsFile('example.pdf')
-      this.pdfUrl = pdf
+      const pdfAssets = getAssetsFile('example.pdf')
+      this.pdfUrl = pdfAssets
+    }
+  },
+  mounted() {
+    const container = document.getElementById('pdf-container')
+
+    this.loadPdf(this.pdfUrl, container)
+    // 监听窗口的 resize 事件，实现自适应效果
+    window.addEventListener('resize', () => {
+      container.innerHTML = ''
+      this.loadPdf(this.pdfUrl, container)
+    })
+  },
+  methods: {
+    async loadPdf(pdfUrl, container) {
+      try {
+        const loadingTask = pdfjsLib.getDocument({
+          url: pdfUrl,
+          disableRange: true
+        })
+        this.pdf = await loadingTask.promise
+        this.totalPages = this.pdf.numPages
+
+        for (let pageNum = 1; pageNum <= this.totalPages; pageNum++) {
+          const page = await this.pdf.getPage(pageNum)
+          const viewport = page.getViewport({ scale: this.calculateScale(page) })
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          canvas.height = viewport.height
+          canvas.width = viewport.width
+          container.appendChild(canvas)
+
+          await page.render({
+            canvasContext: ctx,
+            viewport,
+          }).promise
+        }
+      }
+      catch (error) {
+        console.error('Error loading PDF:', error)
+      }
+    },
+    // 计算缩放比例以适应容器宽度
+    calculateScale(page) {
+      const containerWidth = document.getElementById('pdf-container').clientWidth
+      const viewport = page.getViewport({ scale: 1 })
+      return containerWidth / viewport.width
     }
   }
 }

pnpm-lock.yaml

@@ -353,6 +353,9 @@ importers:
       pdfh5:
         specifier: ^1.4.9
         version: 1.4.9
+      pdfjs-dist:
+        specifier: ^5.1.91
+        version: 5.1.91
       qs:
         specifier: ^6.11.2
         version: 6.11.2
@@ -4038,6 +4041,119 @@ packages:
       vite: 4.5.3(less@4.1.3)(sass@1.63.2)(terser@5.19.2)
     dev: true
 
+  /@napi-rs/canvas-android-arm64@0.1.69:
+    resolution: {integrity: sha512-4icWTByY8zPvM9SelfQKf3I6kwXw0aI5drBOVrwfER5kjwXJd78FPSDSZkxDHjvIo9Q86ljl18Yr963ehA4sHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-darwin-arm64@0.1.69:
+    resolution: {integrity: sha512-HOanhhYlHdukA+unjelT4Dg3ta7e820x87/AG2dKUMsUzH19jaeZs9bcYjzEy2vYi/dFWKz7cSv2yaIOudB8Yg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-darwin-x64@0.1.69:
+    resolution: {integrity: sha512-SIp7WfhxAPnSVK9bkFfJp+84rbATCIq9jMUzDwpCLhQ+v+OqtXe4pggX1oeV+62/HK6BT1t18qRmJfyqwJ9f3g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-arm-gnueabihf@0.1.69:
+    resolution: {integrity: sha512-Ls+KujCp6TGpkuMVFvrlx+CxtL+casdkrprFjqIuOAnB30Mct6bCEr+I83Tu29s3nNq4EzIGjdmA3fFAZG/Dtw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-arm64-gnu@0.1.69:
+    resolution: {integrity: sha512-m8VcGmeSBNRbHZBd1srvdM1aq/ScS2y8KqGqmCCEgJlytYK4jdULzAo2K/BPKE1v3xvn8oUPZDLI/NBJbJkEoA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-arm64-musl@0.1.69:
+    resolution: {integrity: sha512-a3xjNRIeK2m2ZORGv2moBvv3vbkaFZG1QKMeiEv/BKij+rkztuEhTJGMar+buICFgS0fLgphXXsKNkUSJb7eRQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-riscv64-gnu@0.1.69:
+    resolution: {integrity: sha512-pClUoJF5wdC9AvD0mc15G9JffL1Q85nuH1rLSQPRkGmGmQOtRjw5E9xNbanz7oFUiPbjH7xcAXUjVAcf7tdgPQ==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-x64-gnu@0.1.69:
+    resolution: {integrity: sha512-96X3bFAmzemfw84Ts6Jg/omL86uuynvK06MWGR/mp3JYNumY9RXofA14eF/kJIYelbYFWXcwpbcBR71lJ6G/YQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-linux-x64-musl@0.1.69:
+    resolution: {integrity: sha512-2QTsEFO72Kwkj53W9hc5y1FAUvdGx0V+pjJB+9oQF6Ys9+y989GyPIl5wZDzeh8nIJW6koZZ1eFa8pD+pA5BFQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas-win32-x64-msvc@0.1.69:
+    resolution: {integrity: sha512-Q4YA8kVnKarApBVLu7F8icGlIfSll5Glswo5hY6gPS4Is2dCI8+ig9OeDM8RlwYevUIxKq8lZBypN8Q1iLAQ7w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@napi-rs/canvas@0.1.69:
+    resolution: {integrity: sha512-ydvNeJMRm+l3T14yCoUKqjYQiEdXDq1isznI93LEBGYssXKfSaLNLHOkeM4z9Fnw9Pkt2EKOCAtW9cS4b00Zcg==}
+    engines: {node: '>= 10'}
+    requiresBuild: true
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.69
+      '@napi-rs/canvas-darwin-arm64': 0.1.69
+      '@napi-rs/canvas-darwin-x64': 0.1.69
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.69
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.69
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.69
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.69
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.69
+      '@napi-rs/canvas-linux-x64-musl': 0.1.69
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.69
+    dev: false
+    optional: true
+
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
     dependencies:
@@ -5428,7 +5544,7 @@ packages:
       regenerator-runtime: 0.13.11
       systemjs: 6.14.3
       terser: 5.19.2
-      vite: 4.5.3(less@4.1.3)(sass@1.71.1)(terser@5.19.2)
+      vite: 4.5.3(less@4.1.3)(sass@1.63.2)(terser@5.19.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5851,7 +5967,7 @@ packages:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
       eslint: '>=7.5.0'
     dependencies:
-      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(sass-loader@12.6.0)(vue-template-compiler@2.7.14)(vue@2.7.14)
+      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.16)
       '@vue/cli-shared-utils': 5.0.8
       eslint: 7.32.0
       eslint-webpack-plugin: 3.2.0(eslint@7.32.0)(webpack@5.88.2)
@@ -5871,7 +5987,7 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.14)
+      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.16)
       '@vue/cli-shared-utils': 5.0.8
     transitivePeerDependencies:
       - encoding
@@ -5882,7 +5998,7 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(sass-loader@12.6.0)(vue-template-compiler@2.7.14)(vue@2.7.14)
+      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.16)
       '@vue/cli-shared-utils': 5.0.8
     transitivePeerDependencies:
       - encoding
@@ -5893,7 +6009,7 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.14)
+      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.16)
     dev: true
 
   /@vue/cli-plugin-vuex@5.0.8(@vue/cli-service@5.0.1):
@@ -5901,7 +6017,7 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(sass-loader@12.6.0)(vue-template-compiler@2.7.14)(vue@2.7.14)
+      '@vue/cli-service': 5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.16)
     dev: true
 
   /@vue/cli-service@5.0.1(@babel/core@7.22.9)(@vue/compiler-sfc@3.4.21)(lodash@4.17.21)(sass-loader@12.0.0)(vue-template-compiler@2.6.14)(vue@2.7.14):
@@ -13977,6 +14093,13 @@ packages:
     resolution: {integrity: sha512-BCKDjvfMY7+aLjv5/imP+Z6WCX26HH3EcBOKtfvPEpvzZaYepsypFoZEI7a0y+GngCzc4rPaupFsPCSVMonS5w==}
     dev: false
 
+  /pdfjs-dist@5.1.91:
+    resolution: {integrity: sha512-qSIADdagooJB4wWCBnrBJjRvASevmxL0BwafvOuKJG5uTQdYoFBrhrRYnucKNiSc9qS6JIk0hC5y1yktFljXkA==}
+    engines: {node: '>=20'}
+    optionalDependencies:
+      '@napi-rs/canvas': 0.1.69
+    dev: false
+
   /perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
     dev: true
@@ -16918,7 +17041,7 @@ packages:
     peerDependencies:
       vite: '>2.0.0-0'
     dependencies:
-      vite: 4.5.3(less@4.1.3)(sass@1.63.2)(terser@5.19.2)
+      vite: 4.5.3(less@4.1.3)(sass@1.71.1)(terser@5.19.2)
     dev: true
 
   /vite-plugin-ejs@1.6.4: