vue-office-pdf 显示最后一页

### 实现 `vue-office-pdf` 插件默认显示 PDF 文件最后一页 为了使 `vue-office-pdf` 默认加载并展示 PDF 文档的最后一页，可以利用该组件提供的属性和方法来动态计算总页数，并设置初始页面为最后一页。 #### 方法一：通过监听事件获取总页数 可以在初始化时监听文档加载完成的事件，在此之后再设定当前页码等于总页数： ```javascript <template> <div id="app"> <!-- 使用 ref 给组件命名以便后续调用其内部 API --> <pdf-viewer :src="url" @loadedmetadata="onLoadedMetadata"></pdf-viewer> </div> </template> <script> export default { data() { return { url: 'path/to/your/document.pdf', totalPages: null, }; }, methods: { onLoadedMetadata(event) { const viewer = event.target; this.totalPages = viewer.numPages; // 设置当前页为最后一页 setTimeout(() => { viewer.currentPageNumber = this.totalPages; }, 0); } } }; </script> ``` 这种方法依赖于 `@loadedmetadata` 事件触发后的回调函数执行时机[^1]。 #### 方法二：直接操作实例对象 如果希望更简洁地实现相同功能而不必等待整个元数据加载完毕，则可以直接访问已挂载组件实例上的相应属性来进行设置。这通常是在钩子函数内完成，比如 mounted 阶段： ```javascript <template> <div id="app"> <pdf-viewer ref="viewer" :src="url"></pdf-viewer> </div> </template> <script> export default { data() { return { url: 'path/to/your/document.pdf' }; }, mounted() { this.$nextTick(() => { let viewerInstance = this.$refs.viewer; if (viewerInstance && typeof viewerInstance.getNumPages === 'function') { viewerInstance.page = viewerInstance.getNumPages(); } else { console.error('Failed to get the total number of pages.'); } }); } }; </script> ``` 这里假设插件提供了 `getNumPages()` 这样的接口用于查询总页数；如果没有提供这样的API，则可能需要查阅具体使用的版本是否有其他方式获得这个信息[^2]。