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 numPages = ref(0);
const lazySize = ref(5);
const pageSize = ref(lazySize.value);
function installPdfScript() {
return loadScript(pdfJsLibSrc).then(() => {
if (window.pdfjsLib) {
@ -64,13 +67,23 @@ 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 });
@ -143,27 +156,19 @@ export default defineComponent({
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>