VuePDF 使用教程

最新推荐文章于 2025-05-19 15:23:20 发布

田子蜜Robust

最新推荐文章于 2025-05-19 15:23:20 发布

阅读量767

点赞数 15

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00704/article/details/147006531

VuePDF 使用教程

vue-pdf PDF component for Vue 3 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pdf

1. 项目介绍

VuePDF 是一个为 Vue 3 设计的客户端组件，它允许您灵活地在项目中渲染 PDF 页面。该库封装了 pdf.js 库，因此支持 pdf.js 的所有主要功能。

2. 项目快速启动

首先，您需要安装 VuePDF。可以通过以下命令进行安装：

npm i @tato30/vue-pdf
# 或者
yarn add @tato30/vue-pdf

然后，您可以在 Vue 项目中按照以下方式快速启动 VuePDF：

<template>
  <VuePDF :pdf="pdf" />
</template>

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
const { pdf } = usePDF('sample.pdf')
</script>

确保您有一个名为 sample.pdf 的 PDF 文件在您的项目中。

3. 应用案例和最佳实践

文本和注释层

VuePDF 组件支持文本选择和注释交互。要启用这些功能，您需要设置 text-layer 和 annotation-layer 属性，并确保导入了样式文件：

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer />
</template>

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'
const { pdf } = usePDF('sample.pdf')
</script>

XFA 表单

XFA 表单也可以通过 usePDF 函数启用：

<template>
  <VuePDF :pdf="pdf" />
</template>

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'
const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true
})
</script>

服务器端渲染

VuePDF 是一个客户端库。如果您在使用 SSR 框架（如 nuxt），在构建过程中可能会遇到错误。在这种情况下，您可以将 VuePDF 包裹在某种 "仅客户端" 指令或组件中，并且 usePDF 也应该被包裹。

支持非拉丁字符

如果您需要显示非拉丁文本或遇到字体加载警告，您可能需要将 node_modules/pdfjs-dist 目录下的 cmaps 文件夹复制到项目的 public 目录中。

然后，您需要告诉 usePDF 使用这个 cmaps URL：

const { pdf } = usePDF({
  url: pdfsource,
  cMapUrl: '/cmaps/'
})

支持旧版浏览器

如果需要支持旧版浏览器，您可以使用 polyfill 来修补现代函数。但请注意，这种方法只适用于主线程。运行在另一个线程中的 worker 不会受到任何 polyfill 的影响。

此包会为您嵌入和配置 pdf.js worker，但如果您需要支持旧环境，您需要配置 legacy worker：

import * as PDFJS from 'pdfjs-dist'
import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'
PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker

确保在 usePDF 之前设置 legacy worker。