yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-15 07:32:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat(OfficePdf):Lazy loading

Browse Source 
VueOfficePdf has added lazy loading functionality, where it initially loads 5 pages by default and subsequently implements lazy loading as you scroll.
This commit is contained in:
lianxin 2023-08-15 15:09:54 +08:00
parent f03c6b1de9
commit 92e6a70f52
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
core/packages/vue-pdf/src/main.vue
View File

@ -33,6 +33,9 @@ export default defineComponent({
const rootRef = ref([]); const rootRef = ref([]);
const numPages = ref(0); const numPages = ref(0);
const lazySize = ref(5);
const pageSize = ref(lazySize.value);
function installPdfScript() { function installPdfScript() {
return loadScript(pdfJsLibSrc).then(() => { return loadScript(pdfJsLibSrc).then(() => {
if (window.pdfjsLib) { if (window.pdfjsLib) {
@ -64,13 +67,23 @@ export default defineComponent({
}); });
loadingTask.promise.then((pdf) => { loadingTask.promise.then((pdf) => {
pdfDocument = pdf; pdfDocument = pdf;
numPages.value = pdfDocument.numPages; numPages.value = Math.min(pdfDocument.numPages, lazySize.value);
renderPage(1); renderPage(1);
}).catch((e) => { }).catch((e) => {
emit('error', 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) { function renderPage(num) {
pdfDocument.getPage(num).then((pdfPage) => { pdfDocument.getPage(num).then((pdfPage) => {
const viewport = pdfPage.getViewport({ scale: 2 }); const viewport = pdfPage.getViewport({ scale: 2 });
@ -143,27 +156,19 @@ export default defineComponent({
return { return {
rootRef, rootRef,
numPages, numPages,
save save,
onScrollPdf
}; };
} }
}); });
</script> </script>
<template> <template>
<div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;"> <div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;" @scroll="onScrollPdf">
<div <div v-if="numPages" class="vue-office-pdf-wrapper" style="background: gray; padding: 30px 0;position: relative;">
v-if="numPages" <canvas v-for="page in numPages" ref="rootRef" :key="page" style="width:100%" />
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>
</div> </div>
</template> </template>
<style lang="less"> <style lang="less">
</style> </style>