dom-to-vector-pdf 1.0.4 → 1.1.0

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/LICENSE CHANGED
@@ -1,21 +1,22 @@
1
- MIT License
1
+ Copyright
2
2
 
3
3
  Copyright (c) 2025 xzboss
4
4
 
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
11
12
 
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
14
15
 
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,7 +1,14 @@
1
+ [中文](README.zh-CN.md) | [English](README.md)
2
+
1
3
  # dom-to-vector-pdf
2
4
 
3
5
  A tool for converting DOM elements to vector PDFs using jsPDF, dom-to-svg and svg2pdf.js.
4
6
 
7
+ ## Online Demo
8
+
9
+ [Online Demo](https://dom-to-vector-pdf.xzboss.cn/vue-example)
10
+ [docs](https://dom-to-vector-pdf.xzboss.cn/docs)
11
+
5
12
  ## Installation
6
13
 
7
14
  ```bash
@@ -14,19 +21,14 @@ npm install dom-to-vector-pdf
14
21
 
15
22
  | Option | Type | Default | Description |
16
23
  |--------|------|---------|-------------|
17
- | selector | string | required | CSS selector for DOM element to export |
24
+ | selector | string | required | CSS selector for the DOM element to export |
18
25
  | 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
26
 
24
27
  ### Font Options
25
28
 
26
29
  | Option | Type | Default | Description |
27
30
  |--------|------|---------|-------------|
28
31
  | font | string | required | Font file path or URL |
29
- | fontId | string | required | Font ID for identifying the font |
30
32
  | fontStyle | 'normal' \| 'italic' | 'normal' | Font style |
31
33
  | fontWeight | string \| number | - | Font weight (100-900) |
32
34
 
@@ -42,19 +44,19 @@ npm install dom-to-vector-pdf
42
44
  ## Basic Usage
43
45
 
44
46
  ```javascript
47
+ import fontTTF from '@/assets/your-font.ttf'
48
+
45
49
  import vectorInstance from "dom-to-vector-pdf";
46
50
 
47
51
  export const ExportToPDF = (selector, title) => {
48
52
  vectorInstance.registerFont([
49
53
  {
50
- font: PingFangRegular,
51
- fontId: "PingFang",
54
+ font: fontTTF,
52
55
  fontWeight: "400",
53
56
  fontStyle: "normal",
54
57
  },
55
58
  {
56
- font: PingFangHeavy,
57
- fontId: "PingFang",
59
+ font: fontTTF,
58
60
  fontWeight: "700",
59
61
  fontStyle: "normal",
60
62
  },
@@ -74,42 +76,17 @@ export const ExportToPDF = (selector, title) => {
74
76
  - Maintains font styles and weights
75
77
  - Handles complex layouts
76
78
 
77
- ## Todo List
78
-
79
- ### DOM Cloning
80
- - [ ] Inline style handling
81
- - [ ] Style priority management
82
- - [ ] Shadow DOM support
83
- - [ ] iframe support
84
-
85
- ### Icon Fonts
86
- - [ ] Current implementation uses 16px as base font size for scaling
87
- - [ ] Need to improve icon font size handling
88
-
89
- ### SVG Support
90
- - [ ] Currently only supports inline styles where property names match element attributes
91
- - [ ] Need to enhance SVG style handling
92
-
93
- ### Text Alignment
94
- - [ ] Text appears slightly lower than background
95
- - Current workaround: Shift all text up by 3 pixels
96
-
97
- ### Unsupported Features
98
- - [ ✅ ] Image background export
99
- - [ ] Canvas export
100
- - [ ] other unit
101
-
102
- ### Font Support
103
- - [ ] Currently limited to single font family
104
- - Font ID must be consistent during registration
105
- - [ ] Need to add support for multiple fonts
106
- - [ ] Consider WOFF2 format compatibility
107
-
108
- ### Image Export
109
- - [ ] Image export quality needs improvement
110
79
 
111
80
  ## Contributing
112
81
 
82
+ ### Setup
83
+ ```
84
+ pnpm i
85
+ ```
86
+ ### Run demo
87
+ ```
88
+ pnpm dev:vue
89
+ ```
113
90
  Contributions are welcome! Please feel free to submit a Pull Request.
114
91
 
115
92
  ## License
package/README.zh-CN.md CHANGED
@@ -1,7 +1,15 @@
1
+ [中文](README.zh-CN.md) | [English](README.md)
2
+
1
3
  # dom-to-vector-pdf
2
4
 
3
5
  一个使用 jsPDF、dom-to-svg 和 svg2pdf.js 将 DOM 元素转换为矢量 PDF 的工具。
4
6
 
7
+ ## 在线示例
8
+
9
+ [在线演示](https://dom-to-vector-pdf.xzboss.cn/vue-example)
10
+ [docs](https://dom-to-vector-pdf.xzboss.cn/docs)
11
+
12
+
5
13
  ## 安装
6
14
 
7
15
  ```bash
@@ -16,17 +24,12 @@ npm install dom-to-vector-pdf
16
24
  |------|------|--------|------|
17
25
  | selector | string | 必填 | 要导出的DOM元素的CSS选择器 |
18
26
  | 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
27
 
24
28
  ### 字体选项
25
29
 
26
30
  | 选项 | 类型 | 默认值 | 说明 |
27
31
  |------|------|--------|------|
28
32
  | font | string | 必填 | 字体文件路径或URL |
29
- | fontId | string | 必填 | 字体ID |
30
33
  | fontStyle | 'normal' \| 'italic' | 'normal' | 字体样式 |
31
34
  | fontWeight | string \| number | - | 字体粗细(100-900) |
32
35
 
@@ -42,19 +45,19 @@ npm install dom-to-vector-pdf
42
45
  ## 基本用法
43
46
 
44
47
  ```javascript
48
+ import fontTTF from '@/assets/your-font.ttf'
49
+
45
50
  import vectorInstance from "dom-to-vector-pdf";
46
51
 
47
52
  export const ExportToPDF = (selector, title) => {
48
53
  vectorInstance.registerFont([
49
54
  {
50
- font: PingFangRegular,
51
- fontId: "PingFang",
55
+ font: fontTTF,
52
56
  fontWeight: "400",
53
57
  fontStyle: "normal",
54
58
  },
55
59
  {
56
- font: PingFangHeavy,
57
- fontId: "PingFang",
60
+ font: fontTTF,
58
61
  fontWeight: "700",
59
62
  fontStyle: "normal",
60
63
  },
@@ -74,44 +77,19 @@ export const ExportToPDF = (selector, title) => {
74
77
  - 保持字体样式和粗细
75
78
  - 处理复杂布局
76
79
 
77
- ## 待办事项
78
-
79
- ### DOM克隆
80
- - [ ] 内联样式处理
81
- - [ ] 样式优先级管理
82
- - [ ] Shadow DOM支持
83
- - [ ] iframe支持
84
-
85
- ### 图标字体
86
- - [ ] 当前实现使用16px作为基础字体大小进行缩放
87
- - [ ] 需要改进图标字体大小处理
88
-
89
- ### SVG支持
90
- - [ ] 目前仅支持属性名与元素属性匹配的内联样式
91
- - [ ] 需要增强SVG样式处理
92
-
93
- ### 文本对齐
94
- - [ ] 文本位置略低于背景
95
- - 当前解决方案:将所有文本向上偏移3像素
96
-
97
- ### 不支持的功能
98
- - [ ✅ ] 图片背景导出
99
- - [ ] Canvas导出
100
- - [ ] 其他单位支持
101
-
102
- ### 字体支持
103
- - [ ] 目前仅限于单个字体系列
104
- - 注册时字体ID必须保持一致
105
- - [ ] 需要添加多字体支持
106
- - [ ] 考虑WOFF2格式兼容性
107
-
108
- ### 图片导出
109
- - [ ] 图片导出质量需要改进
110
80
 
111
81
  ## 贡献
112
82
 
83
+ ### 安装
84
+ ```
85
+ pnpm i
86
+ ```
87
+ ### 运行示例
88
+ ```
89
+ pnpm dev:vue
90
+ ```
113
91
  欢迎贡献!请随时提交Pull Request。
114
92
 
115
93
  ## 许可证
116
94
 
117
- MIT
95
+ MIT
package/dist/index.d.ts CHANGED
@@ -1,23 +1,57 @@
1
- import type { ExportPdfOptions, FontRegisterOptions, LifecycleHooks } from './types';
2
- export type { ExportPdfOptions, FontRegisterOptions, LifecycleHooks } from './types';
1
+ import { jsPDF } from 'jspdf';
2
+
3
3
  /**
4
- * DOM to PDF tool instance
4
+ * Export PDF配置项
5
5
  */
6
+ interface ExportPdfOptions {
7
+ /** DOM element selector to export */
8
+ selector: string;
9
+ /** Exported PDF file name */
10
+ filename: string;
11
+ /** PDF orientation, default is portrait */
12
+ orientation?: 'portrait' | 'landscape';
13
+ /** Unit, default is px */
14
+ unit?: 'pt' | 'px' | 'in' | 'mm' | 'cm' | 'ex' | 'em' | 'pc';
15
+ /** resource load timeout, default is 5000 */
16
+ resourceTimeout?: number;
17
+ /** Custom hook for processing SVG elements */
18
+ beforeSvgConvert?: (svgElement: SVGElement) => void;
19
+ /** Custom hook for processing PDF document */
20
+ beforePdfSave?: (pdf: jsPDF) => void;
21
+ }
22
+ /**
23
+ * Font registration options
24
+ */
25
+ interface FontRegisterOptions {
26
+ /** Font file path or URL */
27
+ font: string;
28
+ /** Font ID for identifying the font */
29
+ fontId?: string;
30
+ /** 字体样式 (normal/italic) */
31
+ fontStyle?: 'normal' | 'italic';
32
+ /** Font weight (100-900) */
33
+ fontWeight?: string | number;
34
+ }
35
+ /**
36
+ * Lifecycle hooks
37
+ */
38
+ interface LifecycleHooks {
39
+ /** Triggered after DOM clone */
40
+ afterDomClone?: (clonedElement: HTMLElement) => void;
41
+ /** Triggered before SVG conversion */
42
+ beforeSvgConvert?: (svgElement: SVGElement) => void;
43
+ /** Triggered before PDF generation */
44
+ beforePdfGenerate?: (pdf: jsPDF) => void;
45
+ /** Triggered before PDF save */
46
+ beforePdfSave?: (pdf: jsPDF) => void;
47
+ }
48
+
6
49
  declare class DOMToPDF {
7
- private converter;
8
50
  private fontManager;
9
51
  constructor();
10
- /**
11
- * Export PDF
12
- * @param options Export configuration
13
- * @param hooks Lifecycle hooks
14
- */
15
52
  exportPDF(options: ExportPdfOptions, hooks?: LifecycleHooks): Promise<void>;
16
- /**
17
- * Register font
18
- * @param options Font registration options
19
- */
20
53
  registerFont(options: FontRegisterOptions | FontRegisterOptions[]): void;
21
54
  }
22
- export declare const instance: DOMToPDF;
23
- export default instance;
55
+ declare const instance: DOMToPDF;
56
+
57
+ export { ExportPdfOptions, FontRegisterOptions, LifecycleHooks, instance as default, instance };