vue-pdf-embed（Vue3实现pdf本地预览功能）

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

特性

在 Vue 应用中可控渲染 PDF 文档
处理受密码保护的文档
包含文本层（可搜索和选择文档内容）
包含注释层（注释和链接）
无需 peer 依赖或额外配置
可直接在浏览器中使用（参见示例）

兼容性

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

安装

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

bash 复制代码

npm install vue-pdf-embed

// 或

yarn add vue-pdf-embed

html 复制代码

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

使用方法

javascript 复制代码

<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。

javascript 复制代码

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 属性传递（例如，在多个组件实例之间共享源时）。

javascript 复制代码

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

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

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

资源

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

javascript 复制代码

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

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

javascript 复制代码

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

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