Issue with loading a new file in the existing pdfvuer

[ramanangru]

I have used pdfvuer component in an application. I am loading the local pdf into the pdfvuer and it works fine for the first time. When i try to load another file in the existing component. The previous file page is retained it is not getting cleared from the view. Can you please let me know how can i erase the previous data and load new pdf file into the view.

[ramanangru]

Just got a clue from another similar issue. Whether we can achieve this here???

mozilla/pdf.js#7744

[arkokoley]

Working on #18. Once that is done, Changing the 'src' prop should do it.

[ramanangru]

Sorry to bug you, can I know when it will be completed???

[arkokoley]

Probably by this weekend.

[ramanangru]

Can you please let me know once this issue is fixed

[ramanangru]

Fixed the issue by assigning a dynamic key in pdf src. This solves the old pdf reloading again

HTML Code

<pdf :src="pdfdata" v-for="i in numPages" :key="dynamicKey" :id="i" :page="i"
          :scale.sync="scale" style="width:100%;margin:20px auto;">

Vue Code

getPdf (file) {
      var self = this;
      self.pdfdata = "";
      //document.getElementById('pdfvuer').removeChild()
      self.pdfdata = pdfvuer.createLoadingTask(file);
      self.dynamicKey = Math.random(10000);
}

[rmalhotra2192]

Using the dynamicKey approach triggers the rule for the key directive of v-for with eslint. More on this here

What worked for me was to reset the respective data at each load. This instantly clears up the canvas and loads up the new pdf file without having pages from the previous pdf.

resetData() {
    this.page = 1;
    this.numPages = 0;
    this.pdfdata = undefined;
    this.errors = [];
}

You can call this method when changing up the pdf. You would most probably want to call this with the getPdf() method.