vue3-pdfjs 预览远程PDF第二次打开使用缓存的PDF

使用到的关键包：

"vue3-pdfjs": "^0.1.6",

官方文档地址： github.com/randolphtel… 官方Demo： randolphtellis.github.io/vue3-pdfjs/…

原始关键代码

<VuePdf v-for="page in numOfPages" :src="pdfSrc" :page="page" enableTextSelection enableAnnotations
      style="width: 100%;" />

问题描述及解决过程

pdfSrc 变量（PDF文件地址）有效的情况下，第一次打开PDF预览没问题。第二次打开文件，文件地址已经变化，理论上来说PDF预览到不同的文件。但却还是打开了第一个文件。

我尝试了在PDF地址后边加上一个时间戳来解决同个文件名可能导致的http缓存问题。但是我发现我第二次打开的PDF的地址完全不同于第一个地址，所以根本不存在HTTP缓存的问题。

后来我注意到我使用了 v-for 来渲染PDF的每一页内容。但是没有定义 key。而key在v-for的dom渲染中很关键。（具体我描述不出来）

我加上了key之后，问题就解决了。我的理解就是没有设置key的情况下，组件还沿用了第一次渲染的dom，导致之后再次打开时，组件并没有更新到最新，所以显示的还是第一次打开的pdf。

改正后的代码：

<VuePdf v-for="page in numOfPages" :key="pdfUrl + page" :src="pdfSrc" :page="page" enableTextSelection enableAnnotations
      style="width: 100%;" />