在Web应用中，PDF预览是一个常见需求。今天我将分享如何使用vue-pdf实现一个支持多页同时预览的PDF查看器组件。
功能需求
我们需要实现一个PDF查看器，具有以下功能：
- 支持同时显示多页（本文以3页为例）
- 支持前后翻页浏览
- 显示加载状态
技术选型
我们使用以下技术：
- Vue.js：前端框架
- vue-pdf：pdf.js的Vue封装
- lodash,throttle：用于函数节流
核心代码实现
组件结构
> <div class="multi-pdf-viewer">
<div v-if="loading" class="pdf-loading-mask">
<div class="loading-spinner"></div>
PDF加载中...
</div>
<button
class="left-btn"
@click="prevSet"
:disabled="currentSet === 1 || loading"
>
<i class="iconfont icon-zuojiantou"></i>
</button>
<div class="pdf-pages">
<pdf
:src="pdfSrc"
:page="startPage"
class="pdf-page"
@num-pages="numPages = $event"
@page-loaded="handlePageLoaded(startPage)"
></pdf>
<pdf
:src="pdfSrc"
:page="startPage + 1"
class="pdf-page"
@page-loaded="handlePageLoaded(startPage + 1)"
></pdf>
<pdf
:src="pdfSrc"
:page="startPage + 2"
class="pdf-page"
@page-loaded="handlePageLoaded(startPage + 2)"
></pdf>
</div>
<button
class="right-btn"
@click="nextSet"
:disabled="currentSet === totalSets || loading"
>
<i class="iconfont icon-youjiantou"></i>
</button>
</div>
</template>