dom-to-vector-pdf 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -1
- package/README.zh-CN.md +60 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,43 @@
|
|
|
2
2
|
|
|
3
3
|
A tool for converting DOM elements to vector PDFs using jsPDF, dom-to-svg and svg2pdf.js.
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install dom-to-vector-pdf
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Configuration Options
|
|
12
|
+
|
|
13
|
+
### Export Options
|
|
14
|
+
|
|
15
|
+
| Option | Type | Default | Description |
|
|
16
|
+
|--------|------|---------|-------------|
|
|
17
|
+
| id | string | required | DOM element ID to export |
|
|
18
|
+
| filename | string | required | Exported PDF file name |
|
|
19
|
+
| orientation | 'portrait' \| 'landscape' | 'portrait' | PDF orientation |
|
|
20
|
+
| unit | 'px' | Unit for measurements(only px) |
|
|
21
|
+
| beforeSvgConvert | (svgElement: SVGElement) => void | - | Custom hook for processing SVG elements |
|
|
22
|
+
| beforePdfSave | (pdf: jsPDF) => void | - | Custom hook for processing PDF document |
|
|
23
|
+
|
|
24
|
+
### Font Options
|
|
25
|
+
|
|
26
|
+
| Option | Type | Default | Description |
|
|
27
|
+
|--------|------|---------|-------------|
|
|
28
|
+
| font | string | required | Font file path or URL |
|
|
29
|
+
| fontId | string | required | Font ID for identifying the font |
|
|
30
|
+
| fontStyle | 'normal' \| 'italic' | 'normal' | Font style |
|
|
31
|
+
| fontWeight | string \| number | - | Font weight (100-900) |
|
|
32
|
+
|
|
33
|
+
### Lifecycle Hooks
|
|
34
|
+
|
|
35
|
+
| Hook | Type | Description |
|
|
36
|
+
|------|------|-------------|
|
|
37
|
+
| afterDomClone | (clonedElement: HTMLElement) => void | Triggered after DOM clone |
|
|
38
|
+
| beforeSvgConvert | (svgElement: SVGElement) => void | Triggered before SVG conversion |
|
|
39
|
+
| beforePdfGenerate | (pdf: jsPDF) => void | Triggered before PDF generation |
|
|
40
|
+
| beforePdfSave | (pdf: jsPDF) => void | Triggered before PDF save |
|
|
41
|
+
|
|
5
42
|
## Basic Usage
|
|
6
43
|
|
|
7
44
|
```javascript
|
|
@@ -22,7 +59,7 @@ export const ExportToPDF = (id, title) => {
|
|
|
22
59
|
fontStyle: "normal",
|
|
23
60
|
},
|
|
24
61
|
]);
|
|
25
|
-
vectorInstance.
|
|
62
|
+
vectorInstance.exportPDF({
|
|
26
63
|
id,
|
|
27
64
|
filename: title,
|
|
28
65
|
});
|
|
@@ -60,6 +97,7 @@ export const ExportToPDF = (id, title) => {
|
|
|
60
97
|
### Unsupported Features
|
|
61
98
|
- [ ] Image background export
|
|
62
99
|
- [ ] Canvas export
|
|
100
|
+
- [ ] other unit
|
|
63
101
|
|
|
64
102
|
### Font Support
|
|
65
103
|
- [ ] Currently limited to single font family
|
package/README.zh-CN.md
CHANGED
|
@@ -2,7 +2,44 @@
|
|
|
2
2
|
|
|
3
3
|
一个使用 jsPDF、dom-to-svg 和 svg2pdf.js 将 DOM 元素转换为矢量 PDF 的工具。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install dom-to-vector-pdf
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 配置选项
|
|
12
|
+
|
|
13
|
+
### 导出选项
|
|
14
|
+
|
|
15
|
+
| 选项 | 类型 | 默认值 | 说明 |
|
|
16
|
+
|------|------|--------|------|
|
|
17
|
+
| id | string | 必填 | 要导出的DOM元素ID |
|
|
18
|
+
| filename | string | 必填 | 导出的PDF文件名 |
|
|
19
|
+
| orientation | 'portrait' \| 'landscape' | 'portrait' | PDF方向 |
|
|
20
|
+
| unit | 'px' | 测量单位（只支持px） |
|
|
21
|
+
| beforeSvgConvert | (svgElement: SVGElement) => void | - | SVG元素处理钩子 |
|
|
22
|
+
| beforePdfSave | (pdf: jsPDF) => void | - | PDF文档处理钩子 |
|
|
23
|
+
|
|
24
|
+
### 字体选项
|
|
25
|
+
|
|
26
|
+
| 选项 | 类型 | 默认值 | 说明 |
|
|
27
|
+
|------|------|--------|------|
|
|
28
|
+
| font | string | 必填 | 字体文件路径或URL |
|
|
29
|
+
| fontId | string | 必填 | 字体ID |
|
|
30
|
+
| fontStyle | 'normal' \| 'italic' | 'normal' | 字体样式 |
|
|
31
|
+
| fontWeight | string \| number | - | 字体粗细(100-900) |
|
|
32
|
+
|
|
33
|
+
### 生命周期钩子
|
|
34
|
+
|
|
35
|
+
| 钩子 | 类型 | 说明 |
|
|
36
|
+
|------|------|------|
|
|
37
|
+
| afterDomClone | (clonedElement: HTMLElement) => void | DOM克隆后触发 |
|
|
38
|
+
| beforeSvgConvert | (svgElement: SVGElement) => void | SVG转换前触发 |
|
|
39
|
+
| beforePdfGenerate | (pdf: jsPDF) => void | PDF生成前触发 |
|
|
40
|
+
| beforePdfSave | (pdf: jsPDF) => void | PDF保存前触发 |
|
|
41
|
+
|
|
42
|
+
## 基本用法
|
|
6
43
|
|
|
7
44
|
```javascript
|
|
8
45
|
import vectorInstance from "dom-to-vector-pdf";
|
|
@@ -22,57 +59,58 @@ export const ExportToPDF = (id, title) => {
|
|
|
22
59
|
fontStyle: "normal",
|
|
23
60
|
},
|
|
24
61
|
]);
|
|
25
|
-
vectorInstance.
|
|
62
|
+
vectorInstance.exportPDF({
|
|
26
63
|
id,
|
|
27
64
|
filename: title,
|
|
28
65
|
});
|
|
29
66
|
};
|
|
30
67
|
```
|
|
31
68
|
|
|
32
|
-
##
|
|
69
|
+
## 特性
|
|
33
70
|
|
|
34
|
-
- 将
|
|
35
|
-
-
|
|
36
|
-
- 支持
|
|
37
|
-
-
|
|
71
|
+
- 将DOM元素转换为矢量PDF
|
|
72
|
+
- 保持矢量图形和文本
|
|
73
|
+
- 支持SVG元素
|
|
74
|
+
- 保持字体样式和粗细
|
|
38
75
|
- 处理复杂布局
|
|
39
76
|
|
|
40
77
|
## 待办事项
|
|
41
78
|
|
|
42
|
-
### DOM
|
|
79
|
+
### DOM克隆
|
|
43
80
|
- [ ] 内联样式处理
|
|
44
81
|
- [ ] 样式优先级管理
|
|
45
|
-
- [ ] Shadow DOM
|
|
46
|
-
- [ ] iframe
|
|
82
|
+
- [ ] Shadow DOM支持
|
|
83
|
+
- [ ] iframe支持
|
|
47
84
|
|
|
48
85
|
### 图标字体
|
|
49
|
-
- [ ] 当前实现使用
|
|
86
|
+
- [ ] 当前实现使用16px作为基础字体大小进行缩放
|
|
50
87
|
- [ ] 需要改进图标字体大小处理
|
|
51
88
|
|
|
52
|
-
### SVG
|
|
53
|
-
- [ ]
|
|
54
|
-
- [ ] 需要增强
|
|
89
|
+
### SVG支持
|
|
90
|
+
- [ ] 目前仅支持属性名与元素属性匹配的内联样式
|
|
91
|
+
- [ ] 需要增强SVG样式处理
|
|
55
92
|
|
|
56
93
|
### 文本对齐
|
|
57
|
-
- [ ]
|
|
58
|
-
-
|
|
94
|
+
- [ ] 文本位置略低于背景
|
|
95
|
+
- 当前解决方案：将所有文本向上偏移3像素
|
|
59
96
|
|
|
60
97
|
### 不支持的功能
|
|
61
98
|
- [ ] 图片背景导出
|
|
62
|
-
- [ ] Canvas
|
|
99
|
+
- [ ] Canvas导出
|
|
100
|
+
- [ ] 其他单位支持
|
|
63
101
|
|
|
64
102
|
### 字体支持
|
|
65
|
-
- [ ]
|
|
66
|
-
-
|
|
103
|
+
- [ ] 目前仅限于单个字体系列
|
|
104
|
+
- 注册时字体ID必须保持一致
|
|
67
105
|
- [ ] 需要添加多字体支持
|
|
68
|
-
- [ ]
|
|
106
|
+
- [ ] 考虑WOFF2格式兼容性
|
|
69
107
|
|
|
70
108
|
### 图片导出
|
|
71
|
-
- [ ]
|
|
109
|
+
- [ ] 图片导出质量需要改进
|
|
72
110
|
|
|
73
111
|
## 贡献
|
|
74
112
|
|
|
75
|
-
|
|
113
|
+
欢迎贡献！请随时提交Pull Request。
|
|
76
114
|
|
|
77
115
|
## 许可证
|
|
78
116
|
|