vue-pdf-export：面向真实浏览器应用的 Vue 3 PDF 导出库发布

译注：本文编译自 dev.to 作者 Saurabh Zaiswal 的发布公告，原文标题为 "I built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps"，首发于 2026 年 9 月 12 日。原文链接见文末。

开发者 Saurabh Zaiswal 近日发布了 vue-pdf-export，一个基于 Vue 3 + TypeScript、可直接在浏览器中生成 PDF 的库。作者表示，该库的动机来自在多个 Vue 项目中反复需要相同的 PDF 功能，希望有一个可复用的方案，而不是每次都重新实现同样的逻辑。

主要能力

该库的功能覆盖了浏览器端 PDF 导出的常见需求：

Canvas 渲染与可选文本（selectable-text）渲染两种模式
自动分页与手动分页
预览、下载与浏览器打印
页眉与页脚
水印与指定页面（page targeting）
PDF 内可点击链接
密码保护与权限控制
PDF 元数据与压缩
进度上报与取消
大文档渲染
输出 Blob、ArrayBuffer、Base64 以及 PDF data URL
通过 data-pdf-ignore 在导出时排除指定 UI 元素
仅作用于导出结果的页面与 body 样式
对 Nuxt 3 与 Nuxt 4 的 SSR 安全导入

包管理方面，作者称已覆盖 npm、pnpm、Yarn、Yarn Plug'n'Play 与 Bun 的兼容性测试。

安装与基本用法

shell

npm install vue-pdf-export

基本用法如下：

vue

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

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

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

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

Canvas 渲染与可选文本渲染

当优先考虑 HTML/CSS 还原度时，使用 Canvas 渲染：

vue

<Html2Pdf render-mode="canvas">

当用户需要在生成的 PDF 中选择、搜索和复制文本时，使用可选文本渲染：

vue

<Html2Pdf render-mode="text">

作者认为，这一设计让该库既能用于高度视觉化的版式，也能用于报告、发票、对账单和文档等以文字为主的场景。

以编程方式获取输出

生成的 PDF 也可以直接在应用中使用：

typescript

const blob = await pdf.value?.generatePdf()
const buffer = await pdf.value?.generatePdfArrayBuffer()
const base64 = await pdf.value?.generatePdfBase64()

这适用于需要上传、存储、预览，或将 PDF 传给其他 API 而非立即下载的场景。

Nuxt 支持

该包在设计上保证导入时不会导致 Nuxt SSR 崩溃。实际的 PDF 生成仍发生在浏览器端，因此在典型的 Nuxt 集成中，必要时可使用 ClientOnly 或惰性客户端渲染。

原文链接

https://dev.to/saurabhzaiswal/i-built-vue-pdf-export-a-vue-3-pdf-export-library-for-real-world-browser-apps-27km

vue-pdf-export：面向真实浏览器应用的 Vue 3 PDF 导出库发布 ​

主要能力 ​

安装与基本用法 ​

Canvas 渲染与可选文本渲染 ​

以编程方式获取输出 ​

Nuxt 支持 ​

相关资源 ​

原文链接 ​

相关文章