load pdf the second time, doesn't work

[zhuyinjing]

hey,i use vue-pdf@3.3.1 in my project. and i use this code in some .vue file <pdf ref="pdf" :src="'/projects/'+ this.$store.state.projectId +'/results/050.DESeq2/ALL.pairs.pdf'" class=""></pdf> when i click the first html i can see pdf in my html. and i click the other html , i can't see pdf in my html, it doesn't request src.. what's wrong with my code? should i add setTimeout to load src?? i try to add setTimeout,but it doesn't work... thanks a lot!!!!

[nassan]

Maybe something related. I have the following situation:

2 components that are using the pdf component. Whichever component gets loaded first (based on ui flow) properly renders the pdf. The following one then just renders a blank screen.

When using the pdf.createLoadingTask, I see that the first time that gets called, it properly returns a PDFDocumentProxy object, and the next time the Promise never resolves, I don't get a PDFDocumentProxy or any error if I try to catch it.

Maybe that is related to the issue? Any thoughts?

I also tried cloning the exposed object and using a clone for each component, doesn't work.

@FranckFreiburger

[FranckFreiburger]

please provide an example.

[nassan]

I don't have the time at the moment, so you can probably close this.

Workaround: I just made sure the pdf was only ever rendered once (no v-ifs or anything), and just used css to change its layout

[shredding]

I have the same problem. Any more insides on how to approach it?

[shredding]

I had finally some time (or pushing reason because we want to move to production :-) ) to investigate this.

vue-pdf (or pdf.js for that sense) uses a worker to fetch the pdf. for some weird reason very deep in the pdf.js it maintains some weird reference to the worker used for the previous fetch here:

https://github.com/mozilla/pdf.js/blob/56ae7a669099b3439b325e434fc6d981910db2c6/src/display/api.js#L1786-L1788

It can be fixed like this:

this.loadingTask = pdf.createLoadingTask(this.src)
await this.loadingTask.then((pdf) => {
    this.loadingTask._worker.destroy()
})

It is explicitly forcing the old worker to go away.

[jly61]

I had finally some time (or pushing reason because we want to move to production :-) ) to investigate this.

vue-pdf (or pdf.js for that sense) uses a worker to fetch the pdf. for some weird reason very deep in the pdf.js it maintains some weird reference to the worker used for the previous fetch here:

https://github.com/mozilla/pdf.js/blob/56ae7a669099b3439b325e434fc6d981910db2c6/src/display/api.js#L1786-L1788

It can be fixed like this:

this.loadingTask = pdf.createLoadingTask(this.src)
await this.loadingTask.then((pdf) => {
    this.loadingTask._worker.destroy()
})

It is explicitly forcing the old worker to go away.

Thanks, this worked for me

[YorkWong30]

I had finally some time (or pushing reason because we want to move to production :-) ) to investigate this.

vue-pdf (or pdf.js for that sense) uses a worker to fetch the pdf. for some weird reason very deep in the pdf.js it maintains some weird reference to the worker used for the previous fetch here:

https://github.com/mozilla/pdf.js/blob/56ae7a669099b3439b325e434fc6d981910db2c6/src/display/api.js#L1786-L1788

It can be fixed like this:

this.loadingTask = pdf.createLoadingTask(this.src)
await this.loadingTask.then((pdf) => {
    this.loadingTask._worker.destroy()
})

It is explicitly forcing the old worker to go away.

thx this works for me my whole code like this👇

<template>
  <div>
    <button @click="changePdf(item)" v-for="item in arr" :key="item.id">
      第{{ item.id }}个pdf
    </button>
    <div>{{ showPdf }}</div>
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i"></pdf>
  </div>
</template>

<script>
import pdf from "vue3-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      showPdf: true,
      src: undefined,
      loadingTask: undefined,
      numPages: undefined,
      arr: [
        {
          id: 1,
          pdfSrc:
            "https://jhhn-files.oss-cn-shenzhen.aliyuncs.com/2023zj/%E6%9D%8E%E5%BD%A9%E4%BA%91%E6%8E%A8%E8%8D%90%E8%A1%A8.pdf",
        },
        {
          id: 2,
          pdfSrc:
            "https://jhhn-files.oss-cn-shenzhen.aliyuncs.com/2023zj/%E6%9D%8E%E5%BD%A9%E4%BA%91%E5%85%88%E8%BF%9B%E4%BA%8B%E8%BF%B9.pdf",
        },
      ],
    };
  },
  methods: {
    async changePdf(item) {
      this.loadingTask = pdf.createLoadingTask(item.pdfSrc);
      this.src = this.loadingTask;
      this.src.promise.then((res) => {
        console.log("promise.then..", res);
        this.numPages = res.numPages;
        this.src._worker.destroy();
      });
    },
  },
  mounted() {
    this.changePdf(this.arr[0]);
  },
};
</script>