vue-pdf-export：为 Vue 3 打造的浏览器端 PDF 工作流

译注：本文编译自 dev.to 上作者 saurabhzaiswal 发布的项目介绍，原文标题为《Building Better PDF Workflows in Vue 3 with vue-pdf-export》，原文链接见文末。文章为作者自述其开源项目的能力与用法，以下内容忠实于原文。

Vue 生态中又添一个面向文档导出的工具库。开发者 saurabhzaiswal 在 dev.to 上介绍了 vue-pdf-export——一个基于 Vue 3 与 TypeScript、可直接在浏览器中生成 PDF 的包。作者表示，做这个项目的起因是他在不同 Vue 项目中反复重写同一批 PDF 功能：分页、预览、打印、页眉页脚、进度处理以及长文档支持，于是决定将其抽象为一个可复用的库。

功能覆盖

根据作者列出的清单，vue-pdf-export 目前支持以下能力：

Canvas 渲染，以及可选中、可搜索的 PDF 文本
自动与手动分页
预览、下载与浏览器打印
页眉与页脚
水印
密码保护与 PDF 权限控制
可点击链接
进度上报与取消操作
Blob、ArrayBuffer 与 Base64 三种输出格式
仅用于导出的样式，以及 data-pdf-ignore 忽略标记
Nuxt 3 与 Nuxt 4 的 SSR 安全导入

其中「可选中、可搜索的文本」与「SSR 安全导入」是这类浏览器端 PDF 方案中较受关注的两点：前者关系到导出文档的可用性，后者则决定了它能否直接用于 Nuxt 服务端渲染环境而不触发构建或运行时报错。

安装与示例

安装方式为常规的 npm 安装：

shell

npm install vue-pdf-export

作者给出的最小示例如下，通过组件 ref 调用 generatePdf()，内容以 #pdf-content 插槽传入：

vue

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

const pdfRef = ref<InstanceType<typeof Html2Pdf> | null>(null)
</script>

<template>
  <button @click="pdfRef?.generatePdf()">
    Generate PDF
  </button>

  <Html2Pdf ref="pdfRef" filename="report.pdf">
    <template #pdf-content>
      <h1>Hello from Vue</h1>
      <p>This content will be exported to PDF.</p>
    </template>
  </Html2Pdf>
</template>

从 API 形态看，该库采用「组件包裹内容 + 插槽声明导出范围」的方式，而非纯函数式调用，这与 Vue 的模板心智较为一致，也便于把页面上已有的 DOM 结构直接纳入导出范围。

作者寻求的反馈

作者在文末表示，希望获得在生产环境中处理过 PDF 的 Vue 开发者的反馈，重点关注分页、大文档、可选中文本以及 API 使用体验（API ergonomics）这几个方向。对于正在评估浏览器端 PDF 方案的团队而言，这几个点也恰好是实际落地时最容易踩坑的地方。

原文链接

https://dev.to/saurabhzaiswal/building-better-pdf-workflows-in-vue-3-with-vue-pdf-export-9ed

vue-pdf-export：为 Vue 3 打造的浏览器端 PDF 工作流 ​

功能覆盖 ​

安装与示例 ​

相关资源 ​

作者寻求的反馈 ​

原文链接 ​

vue-pdf-export：为 Vue 3 打造的浏览器端 PDF 工作流

功能覆盖

安装与示例

相关资源

作者寻求的反馈

原文链接