Possible to get all pages' dimensions?

[shi-yan]

The official example of rendering the entire pdf is a bit slow. I want to use the windowing/list virtualization technique, such that only the visible portion is rendered. To do this, I need to know the dimensions of each page. is there an api for that?

Thanks

[TaTo30]

Use the pdf.js api directly.

The pdf value returned by usePDF is a PDFDocumentLoadingTask object, so in your case this should works:

<script setup lang="ts">
import pdf14 from "@samples/45.pdf";
import { usePDF } from "@tato30/vue-pdf";
import { watch } from "vue";

const { pdf, pages } = usePDF(pdf14);

async function getPagesDimensions() {
  const pdfDocument = await pdf.value!.promise!;
  for (let index = 1; index <= pages.value; index++) {
    const pdfPage = await pdfDocument.getPage(index);
    const pageBounds = pdfPage.getViewport({ scale: 1 });
    console.log(pageBounds);
  }
}

watch(pdf, () => {
  getPagesDimensions();
});
</script>

<template>
  <div>Template</div>
</template>

[shi-yan]

Thank you very much!