中文 ｜ English

dom-to-vector-pdf

一个使用 jsPDF、dom-to-svg 和 svg2pdf.js 将 DOM 元素转换为矢量 PDF 的工具。

在线示例

在线演示 docs

安装

npm install dom-to-vector-pdf

配置选项

导出选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | selector | string | 必填 | 要导出的DOM元素的CSS选择器 | | filename | string | 必填 | 导出的PDF文件名 |

字体选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | font | string | 必填 | 字体文件路径或URL | | fontStyle | 'normal' | 'italic' | 'normal' | 字体样式 | | fontWeight | string | number | - | 字体粗细(100-900) |

生命周期钩子

| 钩子 | 类型 | 说明 | |------|------|------| | afterDomClone | (clonedElement: HTMLElement) => void | DOM克隆后触发 | | beforeSvgConvert | (svgElement: SVGElement) => void | SVG转换前触发 | | beforePdfGenerate | (pdf: jsPDF) => void | PDF生成前触发 | | beforePdfSave | (pdf: jsPDF) => void | PDF保存前触发 |

基本用法

import fontTTF from '@/assets/your-font.ttf'

import vectorInstance from "dom-to-vector-pdf";

export const ExportToPDF = (selector, title) => {
  vectorInstance.registerFont([
    {
      font: fontTTF,
      fontWeight: "400",
      fontStyle: "normal",
    },
    {
      font: fontTTF,
      fontWeight: "700",
      fontStyle: "normal",
    },
  ]);
  vectorInstance.exportPDF({
    selector,
    filename: title,
  });
};

特性

• 将DOM元素转换为矢量PDF
• 保持矢量图形和文本
• 支持SVG元素
• 保持字体样式和粗细
• 处理复杂布局

贡献

安装

pnpm i

运行示例

pnpm dev:vue

欢迎贡献！请随时提交Pull Request。

许可证

MIT