Sharing source between instances

[EHadoux]

Sharing source between instances

[hrynko]

Changes from @mweimerskirch have been included in 1.1.2

In this release, a getDocument function was also attached to the exported module. So that you can load the PDF document outside the component as follows:

<template>
  <div>
    <div v-if="pdfSource">
      <vue-pdf-embed :source="pdfSource" :page="1" />
      <vue-pdf-embed :source="pdfSource" :page="3" />
    </div>
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      pdfSource: null,
    }
  },
  async mounted() {
    this.pdfSource = await VuePdfEmbed.getDocument('<PDF_SOURCE>').promise
  },
}
</script>

Hope this helps

[hrynko]

Hi @EHadoux,

Thanks for your feedback.

Unfortunately, I cannot check right now if it actually shares the loaded document, but I doubt it yet. Although I'm pretty sure that if you're rendering all pages with a single component, there's definitely only one source used.

If the reason it's unacceptable for you to render all pages with a single component is due to styling, you can reuse the .vue-pdf-embed class or assign any other one.

I'm still not sure if this is the solution for you, so please share your thoughts if this can be solved in any other way.

[EHadoux]

Hey, thanks for you response.
Here is what I mean:

As you can see, each page is decorated with checkboxes and a button. It's not just styling but actual elements.
In order to do that, I iterate across all the pages and display them 1 by 1 with the checkboxes.

<div v-for="i in pages" :key="i">
  <q-checkbox label="Cover" />
  ...
  <vue-pdf-embed :source="src" disableAnnotationLayer disableTextLayer :page="i" />
</div>

Problem 1: as you can see, I'm multiplying the instances of the component, one per page.
Problem 2: this pages variable can contain a number only once the document has been loaded. But it can be loaded only if we execute the v-for which requires pages to contain a number (that's a deadlock).
So to solve that, I've put yet another instance at the very top, that loads but is not displayed:

<vue-pdf-embed :source="src" disableAnnotationLayer disableTextLayer @rendered="loaded" v-show="false" />

When that instance emits rendered, I can populate pages that in turns triggers the v-for and displays the individual pages.

So going back to the initial issue and the one in #9.
For problem 1, it's actually not a problem if the underlying resource (the PDF) is loaded only once in memory and shared.
For problem 2, this is due to the fact that the loading of the PDF is done inside the VuePdfEmbed component, and not outside like in, e.g., vue-pdf.

I'm not bothered that much by the workaround, this part is not client-facing, but I was wondering if there is a better way of doing it.

Cheers!

[hrynko]

I see the problem, thanks for the details.

Could you address the question about memory usage (if it is loaded once for the same sources) in the PDF.js repo? At first glance it doesn't seem that way, but I can be wrong.

[mweimerskirch]

@EHadoux
I prepared a pull request (#32) that could be useful for your use case.

Alternatively, you can render thumbnails and display those in a for-loop instead of using the vue-pdf-embed component. In that case however, you would loose the annotation layer as well as the text layer.

Example code:

  <vue-pdf-embed ... @loaded="onLoaded" />
  <img
          v-for="thumbnail in thumbnails"
          :src="thumbnail"
        />

    onLoaded (pdf: PDFDocumentProxy) {
      for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
        pdf.getPage(pageNumber).then((page: PDFPageProxy) => {
          const scale = .5;
          const viewport = page.getViewport({scale: scale});

          const canvas = document.createElement('canvas') as HTMLCanvasElement;
          const context = canvas.getContext('2d');

          canvas.height = viewport.height;
          canvas.width = viewport.width;

          const renderContext = {canvasContext: context, viewport: viewport};

          const renderTask = page.render(renderContext);
          renderTask.promise.then(() => {
            this.thumbnails.push(canvas.toDataURL('image/png'))
          });
        });
      }

[EHadoux]

That's amazing, thanks a lot! I'll check that out soon. Cheers 👍

[EHadoux]

We've tested on our end, and we're not exactly sure about this bit:

vue-pdf-embed/src/vue-pdf-embed.vue

Line 165 in c1e20be

this.source.constructor.name === 'PDFDocumentProxy'

When packed, all the class names are supposed to be minimised, so I don't think "PDFDocumentProxy" actually exists. When we run

(await VuePdfEmbed.getDocument('<PDF_SOURCE>').promise).constructor.name

it gives us e, the minimised name, so it seems we never end up in the true side of the if.

[hrynko]

@mweimerskirch could you take a look at that?

[hrynko]

Nevermind, a fix for this was included in 1.1.3

@EHadoux thanks for the feedback!