vue3使用vue-pdf-embed实现前端PDF在线预览

Vue3 + vue-pdf-embed 实现PDF预览组件开发实践

概述

在现代Web应用中，PDF文档预览是一个常见的功能需求。本文将详细介绍如何使用Vue3 + TypeScript开发一个功能完整的PDF预览组件，包括页面切换、缩放控制等核心功能。

安装vue-pdf-embed插件

bash 复制代码

npm install vue-pdf-embed

组件结构

1. 模板结构

vue 复制代码

<template>
    <div class="pdf-preview">
        <div class="pdf-content">
            <vue-pdf-embed 
                :source="state.source" 
                :style="scaleFun" 
                :page="state.pageNum" 
                class="vue-pdf-embed"
                @loaded="handlePdfLoaded" 
            />
        </div>
        <div class="page_tool">
            <div class="page_tool-item" @click="lastPage">上一页</div>
            <div class="page_tool-item" @click="nextPage">下一页</div>
            <div class="page_tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
            <div class="page_tool-item" @click="pageZoomOut">放大</div>
            <div class="page_tool-item" @click="pageZoomIn">缩小</div>
        </div>
    </div>
</template>

2. 状态管理

使用Vue3的ref来管理组件状态：

typescript 复制代码

const state = ref({
    source: props.pdfUrl,   // 预览pdf文件地址
    pageNum: 1,             // 当前页面
    scale: 1,               // 缩放比例
    numPages: 0,            // 总页数
});

3. 计算属性

使用computed来处理动态样式：

typescript 复制代码

const scaleFun = computed(() => ({
    transform: `scale(${state.value.scale})`,
    width: '100%',
    height: 'auto'
}));

核心功能实现

1. 页面切换功能

typescript 复制代码

function lastPage() {
    if (state.value.pageNum > 1) {
        state.value.pageNum -= 1;
    }
}

function nextPage() {
    if (state.value.pageNum < state.value.numPages) {
        state.value.pageNum += 1;
    }
}

设计要点：

添加边界检查，防止页码越界
确保页码在有效范围内

2. 缩放控制功能

typescript 复制代码

function pageZoomOut() {
    if (state.value.scale < 2) {
        state.value.scale += 0.1;
    }
}

function pageZoomIn() {
    if (state.value.scale > 1) {
        state.value.scale -= 0.1;
    }
}

设计要点：

设置缩放范围：最小1倍，最大2倍
每次缩放步长为0.1
防止过度缩放影响用户体验

3. PDF加载事件处理

我看网上有很多使用这段代码来加载pdf页数，但我实际使用时发现无法正常加载PDF。有了解情况的兄弟能帮忙解答一下吗？

bash 复制代码

// const loadingTask = createLoadingTask(state.value.source)
// loadingTask.promise
// .then((pdf: { numPages: number }) => {
// state.value.numPages = pdf.numPages;
// })
// .catch((error: any) => {
// console.error("PDF 加载失败:", error);
// });

使用 vue-pdf-embed 的自定义事件来处理pdf页数，

typescript 复制代码

const handlePdfLoaded = (pdf: { numPages: number }) => {
    state.value.numPages = pdf.numPages;
};

样式设计

1. 容器布局

css 复制代码

.pdf-preview {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: #e9e9e9;
    overflow: hidden;
}

2. PDF内容区域

css 复制代码

.pdf-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}

3. 工具栏设计

css 复制代码

.page_tool {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page_tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
    user-select: none;
}

.page_tool-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

技术亮点

1. 响应式设计

使用CSS3的transform: scale()实现缩放
保持PDF内容居中显示
工具栏固定在底部，不随内容滚动

2. 用户体验优化

工具栏半透明背景，不影响内容阅读
按钮悬停效果，提供视觉反馈
页码显示，让用户了解当前位置

3. 性能考虑

使用Vue3的响应式系统，避免不必要的重渲染
计算属性缓存，提高性能
合理的缩放范围限制

使用方式

vue 复制代码

<template>
    <PdfPreview :pdfUrl="pdfUrl" />
</template>

<script setup>
import PdfPreview from '@/components/PdfPreview.vue'

const pdfUrl = ref('path/to/document.pdf')
</script>