Display two different documents

[r331]

I have a such code

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import PdfViewer from "@/components/PdfViewer.vue";
const { pdf } = usePDF("old_text.pdf");
const { pdf1 } = usePDF("new_text.pdf");
</script>

<template>
  <ThemeSwitcher/>
  <div class="card">
    <Splitter style="height: 1000px" class="mb-8">
      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdf" />
      </SplitterPanel>
      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdf" />
      </SplitterPanel>
    </Splitter>
  </div>
</template>

I'm trying to load two different documents on one page, but I can see only one.

Here is my working code with vanilla pdfjs:

<script setup>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import { onMounted, ref } from "vue";

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.mjs'

const pdf1Container = ref(null);
const pdf2Container = ref(null);

function renderPDF(pdfUrl, container) {
  pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
    const numPages = pdf.numPages;
    for (let pageNum = 1; pageNum <= numPages; pageNum++) {
      renderPage(pdf, pageNum, container);
    }
  });
}

function renderPage(pdf, pageNum, container) {
  pdf.getPage(pageNum).then(function (page) {
    const scale = 1.0;
    const viewport = page.getViewport({ scale: scale });
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    container.value.appendChild(canvas);

    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
}

onMounted(() => {
  renderPDF('old_text.pdf', pdf1Container);
  renderPDF('new_text.pdf', pdf2Container);
})
</script>

<template>
  <ThemeSwitcher />
  <div class="card">
    <Splitter style="height: 1000px" class="mb-8">
      <SplitterPanel class="flex items-center justify-center">
        <div ref="pdf1Container" class="pdf-container"></div>
      </SplitterPanel>
      <SplitterPanel class="flex items-center justify-center">
        <div ref="pdf2Container" class="pdf-container"></div>
      </SplitterPanel>
    </Splitter>
  </div>
</template>

<style scoped>
.pdf-container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
</style>

[TaTo30]

You are using the same pdf in both components

      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdf" />
      </SplitterPanel>
      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdf" />
      </SplitterPanel>

When using multiple usePDF ensure to set a different name to each one

const { pdf: pdfOne } = usePDF(url1)
const { pdf: pdfTwo} = usePDF(url2)

Then, use them on the template

      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdfOne" />
      </SplitterPanel>
      <SplitterPanel class="flex items-center justify-center">
        <VuePDF :pdf="pdfTwo" />
      </SplitterPanel>