PDF 预览组件

上次更新 2025年5月17日星期六 16:9:59 字数 0 字时长 0 分钟

基本介绍

📄 本组件基于 vue3-pdf-app 实现 PDF 文件预览功能，提供以下特性：

✅ 支持 PDF 文件在线预览（基于 PDFJS 2.10.377）
✅ 完整功能支持：缩放、打开、打印、下载、旋转、文本选择
✅ 高级搜索面板与文档密码保护
✅ 侧边栏功能：缩略图、大纲、附件、注释层
✅ 可自定义工具栏 UI 与图标
✅ 支持多浏览器兼容
✅ 主题定制：支持亮/暗模式切换
✅ 内置 TypeScript 支持
✅ 多语言本地化配置

使用示例

注意事项

vue3-pdf-app 的 1.0.3 所使用的 pdfjs-dist 版本为 2.4.456
如需使用更新版本的 pdfjs-dist，请自行封装。
语言包处理： <link rel="resource" type="application/l10n" href="/locales/viewer.ftl" />
href:调整为所需的的路径即可
注意版本对应 找到相应的pdfjs版本 locals 文件即可
更多内容请查阅 vue3-pdf-app

查看代码

pdfdemo.vue

vue

<template>
  <div class="pdf-container">
    <ClientOnly>
      <compontent
      :is="dynamicComponent"
        v-if="isMounted"
        :pdf="pdfUrl"
        :page="currentPage"
        @page-change="handlePageChange"
        theme="light"
        :config="toolbarConfig"
        @pages-rendered="handlePagesRendered"
      />
    </ClientOnly>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

import "vue3-pdf-app/dist/icons/main.css";

// 解决SSG环境下组件未定义的问题
const isMounted = ref(false);
onMounted(() => {
  isMounted.value = true;
});
const dynamicComponent = ref()
onMounted(async () => {
  dynamicComponent.value = (await import('vue3-pdf-app')).default
})

// PDF 文件地址
const pdfUrl = ref("/static/git.pdf");
// 当前页码
const currentPage = ref(1);

// 工具栏配置
const toolbarConfig = ref({
  toolbar: {
    toolbarViewerLeft: {
      sidebarToggle: true,
      previous: true,
      next: true,
    },
    toolbarViewerRight: {
      print: true,
      download: true,
    },
  },
  localization: {
    locale: "zh-CN",
    fallbackLocale: "en-US",
  },
});

// 处理页码变化
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

// 页面渲染完成回调
const handlePagesRendered = (pdfApp) => {
  // 设置默认缩放比例为页面宽度
  pdfApp.pdfViewer.currentScaleValue = "page-width";
};
</script>

<style scoped>
.pdf-container {
  width: 100%;
  height: 800px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.pdf-footer {
  padding: 10px;
  text-align: center;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
}
</style>

PDF 预览组件 ​

基本介绍 ​

使用示例 ​

PDF 预览组件

基本介绍

使用示例