vue-pdf触底加载更多页

### 实现Vue.js项目中使用vue-pdf插件时触底加载更多PDF页 为了实现在页面滚动到底部时自动加载更多PDF页的功能，可以采用监听滚动事件的方法来检测是否到达底部，并在此基础上调用API获取新数据。具体来说，当用户浏览到文档接近末端时触发额外页面的加载。 #### HTML结构设置 首先定义用于展示PDF文件的基础容器： ```html <div id="app"> <div ref="pdfContainer" class="pdf-container"></div> </div> ``` #### JavaScript逻辑编写 接着在`<script>`标签内加入如下代码片段完成主要业务处理： ```javascript import PDFDocument from "vue-pdf"; export default { name: 'PdfViewer', components: { pdf: PDFDocument }, data() { return { currentPage: 1, // 当前显示第几页 totalPages: null, // 总共多少页 loading: false, intervalId: undefined } }, mounted(){ this.loadPage(); window.addEventListener('scroll', this.handleScroll); }, methods:{ async loadPage(){ if(this.loading || (this.currentPage >= this.totalPages)) return; try{ this.loading = true; let response = await fetch(`your_api_endpoint?page=${this.currentPage}`); let blob = await response.blob(); const url = URL.createObjectURL(blob); setTimeout(() => { var newElement = document.createElement("embed"); newElement.setAttribute("type", "application/pdf"); newElement.src = url; newElement.width = "80%"; newElement.height = "700px"; this.$refs.pdfContainer.appendChild(newElement); this.currentPage++; this.loading = false; }, 500); }catch(error){ console.error("Failed to load page:", error); this.loading = false; } }, handleScroll(event) { if(isScrollToBottom()){ this.loadPage(); } } }, beforeDestroy () { clearInterval(this.intervalId); window.removeEventListener('scroll', this.handleScroll); } } ``` 上述代码实现了基本的懒加载机制[^1]。每当浏览器窗口发生滚动变化时都会执行一次`handleScroll()`函数；如果满足条件，则会继续请求并渲染下一页的内容直到达到总页数为止。 注意这里引入了一个辅助判断是否滚至底部的小工具 `isScrollToBottom()` ，其定义方式已在提供的参考资料中有提及[^3]。 此外，在组件销毁之前移除了全局范围内的滚动监听器以防止内存泄漏等问题的发生。 #### CSS样式调整 最后给`.pdf-container`类名添加一些简单的CSS规则使其看起来更美观整齐: ```css .pdf-container { width: 90%; margin-left: auto; margin-right: auto; } /* 可选 */ .embed { border: solid 1px black; padding: .5em; display:block; margin-bottom:.5rem; } ``` 通过这种方式可以在Vue应用里轻松实现带有懒加载特性的PDF查看器了！