From 92e6a70f521487a27317f4cd26b6e6d6d6f7a9c3 Mon Sep 17 00:00:00 2001
From: lianxin <wsl1933467270@gmail.com>
Date: Tue, 15 Aug 2023 15:09:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(OfficePdf):Lazy=20loading=20Vu?=
 =?UTF-8?q?eOfficePdf=20has=20added=20lazy=20loading=20functionality,=20wh?=
 =?UTF-8?q?ere=20it=20initially=20loads=205=20pages=20by=20default=20and?=
 =?UTF-8?q?=20subsequently=20implements=20lazy=20loading=20as=20you=20scro?=
 =?UTF-8?q?ll.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/packages/vue-pdf/src/main.vue | 63 ++++++++++++++++--------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/core/packages/vue-pdf/src/main.vue b/core/packages/vue-pdf/src/main.vue
index 454a648..e7a5e9d 100644
--- a/core/packages/vue-pdf/src/main.vue
+++ b/core/packages/vue-pdf/src/main.vue
@@ -1,9 +1,9 @@
 <script>
-import {defineComponent, ref, onMounted, watch} from 'vue-demi';
+import { defineComponent, ref, onMounted, watch } from 'vue-demi';
 import workerStr from './worker?raw';
 import pdfjsLib from './pdf?raw';
-import {download as downloadFile, getUrl, loadScript} from '../../../utils/url';
-import {base64_encode} from '../../../utils/base64';
+import { download as downloadFile, getUrl, loadScript } from '../../../utils/url';
+import { base64_encode } from '../../../utils/base64';
 import omit from 'lodash/omit';
 
 const pdfJsLibSrc = `data:text/javascript;base64,${(base64_encode(pdfjsLib))}`;
@@ -27,18 +27,21 @@ export default defineComponent({
         }
     },
     emits: ['rendered', 'error'],
-    setup(props, {emit}) {
+    setup(props, { emit }) {
         let pdfDocument = null;
         let loadingTask = null;
         const rootRef = ref([]);
         const numPages = ref(0);
 
+        const lazySize = ref(5);
+        const pageSize = ref(lazySize.value);
+
         function installPdfScript() {
             return loadScript(pdfJsLibSrc).then(() => {
-                if(window.pdfjsLib){
+                if (window.pdfjsLib) {
                     window.pdfjsLib.GlobalWorkerOptions.workerSrc = PdfJsWorkerSrc;
-                }else{
-                  return Promise.reject('window.pdfjsLib未找到');
+                } else {
+                    return Promise.reject('window.pdfjsLib未找到');
                 }
             });
         }
@@ -64,16 +67,26 @@ export default defineComponent({
             });
             loadingTask.promise.then((pdf) => {
                 pdfDocument = pdf;
-                numPages.value = pdfDocument.numPages;
+                numPages.value = Math.min(pdfDocument.numPages, lazySize.value);
                 renderPage(1);
             }).catch((e) => {
                 emit('error', e);
             });
         }
 
+        function onScrollPdf(e) {
+            const { scrollTop, scrollHeight, clientHeight } = e.target;
+            if (scrollTop + clientHeight >= scrollHeight) {
+                if (numPages.value < pdfDocument.numPages) {
+                    numPages.value += Math.min(lazySize.value, pdfDocument.numPages)
+                    renderPage(1);
+                }
+            }
+        }
+
         function renderPage(num) {
             pdfDocument.getPage(num).then((pdfPage) => {
-                const viewport = pdfPage.getViewport({scale: 2});
+                const viewport = pdfPage.getViewport({ scale: 2 });
                 const outputScale = window.devicePixelRatio || 1;
 
                 const canvas = rootRef.value[num - 1];
@@ -89,7 +102,7 @@ export default defineComponent({
                     domWidth = Math.floor(props.options.width);
                     domHeight = Math.floor(domHeight * scale);
                 }
-                if(domWidth > document.documentElement.clientWidth){
+                if (domWidth > document.documentElement.clientWidth) {
                     let scale = document.documentElement.clientWidth / domWidth;
                     domWidth = Math.floor(document.documentElement.clientWidth);
                     domHeight = Math.floor(domHeight * scale);
@@ -124,46 +137,38 @@ export default defineComponent({
 
         onMounted(() => {
             if (props.src) {
-                checkPdfLib().then(init).catch(e=>{
+                checkPdfLib().then(init).catch(e => {
                     console.warn(e);
                 });
             }
         });
 
         watch(() => props.src, () => {
-            checkPdfLib().then(init).catch(e=>{
+            checkPdfLib().then(init).catch(e => {
                 console.warn(e);
             });
         });
-        function save(fileName){
-            pdfDocument && pdfDocument._transport && pdfDocument._transport.getData().then(fileData=>{
-                downloadFile(fileName || `vue-office-pdf-${new Date().getTime()}.pdf`,fileData.buffer);
+        function save(fileName) {
+            pdfDocument && pdfDocument._transport && pdfDocument._transport.getData().then(fileData => {
+                downloadFile(fileName || `vue-office-pdf-${new Date().getTime()}.pdf`, fileData.buffer);
             });
         }
         return {
             rootRef,
             numPages,
-            save
+            save,
+            onScrollPdf
         };
     }
 });
 </script>
 
 <template>
-    <div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;">
-        <div
-            v-if="numPages"
-            class="vue-office-pdf-wrapper"
-            style="background: gray; padding: 30px 0;position: relative;">
-            <canvas
-                v-for="page in numPages"
-                ref="rootRef"
-                :key="page"
-                style="width:100%"
-            />
+    <div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;" @scroll="onScrollPdf">
+        <div v-if="numPages" class="vue-office-pdf-wrapper" style="background: gray; padding: 30px 0;position: relative;">
+            <canvas v-for="page in numPages" ref="rootRef" :key="page" style="width:100%" />
         </div>
     </div>
 </template>
 <style lang="less">
-
-</style>
\ No newline at end of file
+</style>