Can you reload a pdf?

[iwasherefirst2]

Assume I have loaded a pdf like this:

<template>
    <div>
        {{currentPage}} / {{pageCount}}
        <pdf
            src="https://myexample.com/pdfs/exampel.pdf"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
        ></pdf>
    </div>
</template>

<script>

import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },
    data() {
        return {
            currentPage: 0,
            pageCount: 0,
        }
    }
}

</script>

Would it be possible to trigger a reload? I am trying to show a pdf-preview based upon a form, which means if the user makes changes in the form and submits, I would like to reload the pdf, because example.pdf will change.

[Aksimka]

How will you know about server's changes? I suppose the server should send an event (the file was updated!) and you should handle it in front. I think there is no other ways because the browser chaches this pdf file in canvas like an image.

If you post the image on your site, it won't change after the image is updated on server, right? :)

[iwasherefirst2]

@Aksimka well if the user submits the form with the changes, I get a respond from the server letting me know that the pdf has updated. But now I am not sure what I have to do when the pdf has updated.

For an image, I could do something like

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

to force a reload.

[Aksimka]

Okay, you may try to:

<template>
    <div>
        {{currentPage}} / {{pageCount}}
        <pdf
            :src="document"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
        ></pdf>
    </div>
</template>

<script>

import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },
    data() {
        return {
            currentPage: 0,
            pageCount: 0,
                        document: null,
                        link: 'https://myexample.com/pdfs/exampel.pdf',
        }
    },
  mounted() {
      this.loadDocument(this.link);
  },
  methods: {
    formSubmit() {
      form.submit().then(() => {
        this.loadDocument(this.link);
      })
    },
    loadDocument(link) {
      this.document = pdf.createLoadingTask(link);
    }
  }
}

Where to call formSubmit() is another question

[gooczy]

you can find out this file CMapReaderFactory.js in vue-pdf, and change the code like this: ` export default function() {

this.fetch = function(query) {
     /* webpackChunkName: "noprefetch-[request]" */
    return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap').then(function(bcmap) {
        //clear the cache
        delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];
        return {
            cMapData: bcmap.default,
            compressionType: CMapCompressionType.BINARY,
        };
    });
}

}; `