在前端项目中，尤其是后台管理系统、发票/报告导出、在线编辑器、前端页面截图导出等场景，将页面内容导出为 PDF 是非常常见的需求。现在使用 html2canvas + jsPDF 进行构建 hooks 作为示例。

一、为什么需要自定义封装？

自个实现全局 hooks 可控，想怎么来就怎么来（参考 html2pdf.js）。

直接使用 html2canvas 和 jsPDF 通常会遇到：

内容被截断 / 超出容器
内容生成不居中
图片跨域污染导致失败
Tailwind/UnoCSS 的样式与 html2canvas 不兼容
PDF 页面分页不正确
文字渲染模糊
文字下沉（文本 baseline 问题）

要做到尽可能无损的渲染，需要：

克隆 DOM，在单独容器中渲染（目前使用这个方法实现内容不居中问题）
处理 position/overflow/scroll 等不兼容属性
修复不支持的 CSS 颜色函数（oklab/oklch 等）
手动分页 + 图片等比缩放
覆盖一些框架默认样式（如 img display）

二、核心导出功能实现

以下代码实现了完整的导出流程：

自动加载 html2canvas / jsPDF
DOM 克隆渲染
Canvas 控制切分页
PDF 导出或预览
进度回调

代码较长，这里展示关键核心结构：

ts 复制代码

export function useHtml2Pdf() {
  const exporting = ref(false);
  const progress = ref(0);
  const previewImages = ref<string[]>([]);

  // 加载库
  const loadLibraries = async () => { ... }

  // DOM → Canvas
  const renderToCanvas = async () => { ... }

  // Canvas → PDF
  const splitCanvasToPdf = () => { ... }

  // 导出与预览
  const exportPdf = async () => { ... }
  const previewPdf = async () => { ... }

  return { exporting, progress, previewImages, exportPdf, previewPdf };
}

完整代码已在文章结尾处附带（代码以及实现就不详细解读了）。

三、为什么会出现"文字下沉"？

这是使用 html2canvas 时 最常见也是最诡异的 bug 之一：

同一行文字字体不同
图片与文字混合排版
Tailwind / UnoCSS 的 baseline 设置
img 默认为 display: inline 或 inline-block
html2canvas 会根据 CSS 计算内容 baseline，高度计算错误

具体表现：

文字被向下"压"了一点点，与真实页面不一致
某些容器中的文本垂直位置偏离

根本原因

UnoCSS / Tailwind 默认对 img 设置为：

复制代码

display: inline;
vertical-align: middle;

导致 html2canvas 在计算行内盒高度时：

文字基线被迫下移
图片对齐方式干扰文本

html2canvas 本身对 inline-level box 的计算就比较脆弱，因此这个默认样式会破坏它的内部排版逻辑。

四、一行 CSS 解决文字下沉问题

解决方案：强制 img 不参与 inline 排版

css 复制代码

img {
  display: inline-block !important;
}

为什么这行能解决？

inline-block 会创建自己的盒模型，不再参与行内 baseline 对齐。
html2canvas 计算布局时，不需要处理 inline-level baseline，从而避免错位。
避免 Tailwind/UnoCSS 默认的 vertical-align: middle 影响布局高度。

这是经过大量社区使用、实测最稳定的解决方案。

注意：这种 bug 仅在截屏（html2canvas）时出现，真实 DOM 渲染正常。

五、完整代码