Working with multiple documents - Vuejs

You can create multiple pdf viewers on one webpage. It is possible to have multiple PdfDocument, PdfPages and PdfThumbnails components on one page and link the related ones together.

The PdfDocument component has a name attribute that can be set to a string value.

<PdfDocument name="doc-a" />

PdfPages and PdfThumbnails have a document attribute that can be set to the value of PdfDocument's name attribute to tie them together. PdfPages also has an optional name attribute that you can use to link a PdfThumbnails component to a PdfPages component. Provide the PdfPages' name to the PdfThumbnails's pagesviewer attribute.

<PdfPages
  :page-mode="PageMode.Multi"
  document="doc-a"
  name="pages-a"
/>
<PdfThumbnails
  document="doc-a"
  pagesviewer="pages-a"
/>

Similarly you can also use the document attribute of the PdfUploader to link it to a PdfDocument.

<PdfUploader document="doc-a" />

Connecting documents, uploaders, pages and thumbnails can all be done declaratively in the html. You don't need any code to do that.

Screenshot

Code

src/App.vue

<script setup lang="ts">
import { ref } from "vue";
import { PageMode, PdfDocument, PdfUploader, PdfPages, PdfThumbnails, PdfApplication } from "@tallcomponents/unopdf-vue";

// Note: this example uses vite and retrieves the keys from the environment. 
// This should not be used in production.
// See the authentiation section in the usage guide for more information.

const publickey = import.meta.env.VITE_PUBLIC_KEY;
const privatekey = import.meta.env.VITE_PRIVATE_KEY;

const app = ref<{ $el: HTMLPdfApplicationElement }>();

</script>

<template>
  <h1>UnoPdf Example: Working with multiple documents in Vue</h1>

  <PdfApplication
    ref="app"
    :publickey="publickey"
    :privatekey="privatekey"
  />
  <!-- 
    It doesn't matter in what order or where the PdfDocuments are declared. 
    They can be linked to other components via the name and document attributes.
  -->
  <PdfDocument name="doc-b" />
  
  <!-- #region pdfdocument-with-name-attribute -->
  <PdfDocument name="doc-a" />
  <!-- #endregion pdfdocument-with-name-attribute -->

  <h2>Uploader for second document</h2>
  <PdfUploader document="doc-b" />
  
  <h2>Uploader for first document</h2>
  
  <!-- #region pdfuploader-with-document-attribute -->
  <PdfUploader document="doc-a" />
  <!-- #endregion pdfuploader-with-document-attribute -->

  <h2>First document (with thumbnails)</h2>
  <!-- #region pdf-components-with-attributes -->
  <PdfPages
    :page-mode="PageMode.Multi"
    document="doc-a"
    name="pages-a"
  />
  <PdfThumbnails
    document="doc-a"
    pagesviewer="pages-a"
  />
  <!-- #endregion pdf-components-with-attributes -->

  <h2>Second document (no thumbnails)</h2>
 
  <PdfPages
    :page-mode="PageMode.Multi"
    document="doc-b"
  />
</template>

Running the example

• Download the vue - Working with multiple documents project
• Unzip the file to a directory vue-multiple-documents.
  MacOS

  unzip vue-multiple-documents.zip -d vue-multiple-documents

• Open a terminal and go to that directory

  cd vue-multiple-documents

• Install dependencies
  npm

  npm install

  yarn

  yarn

• Start the project
  npm

  npm run start

  yarn

  yarn start