dom-to-vector-pdf/README.zh-CN.md

Convert DOM elements to vector PDFs using jsPDF, dom-to-svg and svg2pdf.js

[中文](README.zh-CN.md) ｜ [English](README.md)

# dom-to-vector-pdf

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

## 在线示例

[在线演示](https://dom-to-vector-pdf.xzboss.cn/vue-example)
[docs](https://dom-to-vector-pdf.xzboss.cn/docs)


## 安装

```bash
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保存前触发 |

## 基本用法

```javascript
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