适用于 Vue 3 的 PDF 嵌入组件（Vue 2 支持请参见兼容性部分）

特性

• 在 Vue 应用中可控渲染 PDF 文档

• 处理受密码保护的文档

• 包含文本层（可搜索和选择文档内容）

• 包含注释层（注释和链接）

• 无需 peer 依赖或额外配置

• 可直接在浏览器中使用（参见示例）

兼容性

此包仅兼容 Vue 3。如需 Vue 2 支持，请安装 vue-pdf-embed@1 并参考 v1 文档。

安装

根据环境，可通过以下方式之一安装此包：

npm install vue-pdf-embed

// 或

yarn add vue-pdf-embed

<script src="https://unpkg.com/vue-pdf-embed"></script>

使用方法

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'

// 可选样式
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

// 可以是 URL、Base64、二进制数据或文档代理对象
const pdfSource = '<PDF_URL>'
</script>

<template>
  <VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>

属性

名称	类型	可接受值	描述
annotationLayer	boolean		是否启用注释层
height	number	自然数	期望的页面高度（像素）（如果指定了 width 属性则忽略此值）
imageResourcesPath	string	URL 或带有尾部斜杠的路径	注释层中使用的图标路径
linkService	PDFLinkService		用于覆盖默认文档导航服务的服务（触发 internal-link-clicked 事件）
page	number number[]	1 到最后一页的页码	要显示的页码（如未指定则显示所有页面）
rotation	number	0, 90, 180, 270（90 的倍数）	期望的页面旋转角度（度）
scale	number	有理数	期望的页面视口缩放比例
source	string object PDFDocumentProxy	文档 URL、Base64、类型化数组或文档代理对象	要显示的文档来源
textLayer	boolean		是否启用文本层
width	number	自然数	期望的页面宽度（像素）

事件

名称	值	描述
internal-link-clicked	目标页码	内部链接被点击
loaded	PDF 文档代理对象	文档加载完成
loading-failed	错误对象	文档加载失败
password-requested	包含 callback 函数和 isWrongPassword 标志的对象	需要密码才能显示文档
progress	包含已加载页数 loaded 和总页数 total 的对象	跟踪文档加载进度
rendered	–	文档渲染完成
rendering-failed	错误对象	文档渲染失败

插槽

名称	属性	描述
after-page	page（页码）	每页后添加的内容
before-page	page（页码）	每页前添加的内容

公共方法

名称	参数	描述
download	文件名 (string)	下载文档
print	打印分辨率 (number), 文件名 (string), 所有页面标志 (boolean)	通过浏览器接口打印文档

注意： 公共方法可通过模板引用访问。

常见问题与注意事项

服务器端渲染

这是一个客户端库，因此在处理 SSR（服务器端渲染）框架（如 Nuxt）时需要牢记这一点。根据使用的框架，您可能需要正确配置库导入或使用包装器。

Web Worker 加载

默认加载用于处理 PDF 文档的 web worker。但是，由于打包器限制或 CSP（内容安全策略），这可能无法接受。在这种情况下，建议使用基本构建（index.essential.mjs）并使用暴露的 GlobalWorkerOptions 手动设置 worker。

import { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs'
import PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?url'

GlobalWorkerOptions.workerSrc = PdfWorker

文档加载

通常，文档加载在组件内部处理。但是，出于优化目的，可以在 useVuePdfEmbed 组合函数中加载文档，然后将其作为组件的 source 属性传递（例如，在多个组件实例之间共享源时）。

<script setup>
import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'

const { doc } = useVuePdfEmbed({ source: '<PDF_URL>' })
</script>

<template>
  <VuePdfEmbed :source="doc" />
</template>

资源

应指定预定义 CMaps 的路径，以确保正确渲染包含非拉丁字符的文档，以及在发生 CMap 相关错误时：

<VuePdfEmbed
  :source="{
    cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
    url: '<PDF_URL>',
  }"
/>

必须指定图像资源路径才能使注释正确显示：

<VuePdfEmbed
  image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
  source="<PDF_URL>"
/>

注意： 上面的示例使用 CDN 加载资源，但是这些资源也可以通过安装 pdfjs-dist 包作为依赖项并进一步配置打包器来包含在构建中。