@oiij/js-pdf 0.0.10 → 0.0.11

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 CHANGED
@@ -1,12 +1,90 @@
1
- # Use JS-PDF
1
+ # Use JS-PDF 🚀
2
2
 
3
3
  [![NPM version](https://img.shields.io/npm/v/@oiij/js-pdf)](https://www.npmjs.com/package/@oiij/js-pdf)
4
- [![MIT-license](https://img.shields.io/npm/l/@oiij/js-pdf)](https://github.com/Eiog/@oiij/js-pdf/blob/main/LICENSE)
4
+ [![MIT-license](https://img.shields.io/npm/l/@oiij/js-pdf)](https://github.com/oiij/use/blob/main/packages/js-pdf/LICENSE)
5
5
 
6
- ## Usage
6
+ ## 项目简介 📦
7
+
8
+ Use JS-PDF 是基于 jsPDF 的 Vue 3 封装,提供便捷的 PDF 生成功能,帮助开发者在浏览器端快速生成和下载 PDF 文档。
9
+
10
+ ## 功能特点 ✨
11
+
12
+ ### PDF 生成 📄
13
+
14
+ - 📝 支持文本、图片等多种内容
15
+ - 🎨 提供丰富的样式配置
16
+ - 💾 直接在浏览器端生成 PDF
17
+
18
+ ### 模块化设计 🧩
19
+
20
+ - 📁 采用模块化架构,组件独立封装
21
+ - 📦 支持按需导入,减小打包体积
22
+ - 🔧 清晰的文件结构,易于维护和扩展
23
+
24
+ ### 类型安全 🔒
25
+
26
+ - 📝 完整的 TypeScript 类型定义
27
+ - 💡 提供准确的类型推断和代码提示
28
+ - 🎯 支持 Vue 3 的 Composition API 类型系统
29
+
30
+ ### 轻量高效 ⚡
31
+
32
+ - 🚀 核心代码精简,无额外依赖
33
+ - 🏃 优化的性能表现,最小化运行时开销
34
+ - 📦 支持 Tree Shaking,进一步减小打包体积
35
+
36
+ ## 安装 📥
37
+
38
+ ### 使用 pnpm 🐱
7
39
 
8
40
  ```bash
9
41
  pnpm add @oiij/js-pdf
10
42
  ```
11
43
 
12
- [在线文档](https://oiij-use.vercel.app/examples/js-pdf/started)
44
+ ### 使用 npm 📦
45
+
46
+ ```bash
47
+ npm install @oiij/js-pdf
48
+ ```
49
+
50
+ ### 使用 yarn 🧶
51
+
52
+ ```bash
53
+ yarn add @oiij/js-pdf
54
+ ```
55
+
56
+ ## 快速开始 🌟
57
+
58
+ ### 基础使用
59
+
60
+ ```vue
61
+ <script setup>
62
+ import { useJsPdf } from '@oiij/js-pdf'
63
+ </script>
64
+
65
+ <template>
66
+ <div />
67
+ </template>
68
+ ```
69
+
70
+ ## 在线文档 📚
71
+
72
+ [在线文档](https://oiij-use.vercel.app/js-pdf/js-pdf) 📖
73
+
74
+ ## 贡献指南 🤝
75
+
76
+ 欢迎贡献代码、报告问题或提出新功能建议!
77
+
78
+ 1. Fork 本仓库 🍴
79
+ 2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
80
+ 3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
81
+ 4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
82
+ 5. 打开一个 Pull Request 📥
83
+
84
+ ## 许可证 📄
85
+
86
+ 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
87
+
88
+ ## 联系方式 📞
89
+
90
+ - GitHub: [https://github.com/Eiog/@oiij/js-pdf](https://github.com/Eiog/@oiij/js-pdf) 🌟
package/dist/index.d.mts CHANGED
@@ -2,14 +2,76 @@ import { HTMLFontFace, ImageOptions, TextOptions, jsPDF, jsPDFOptions } from "js
2
2
  import * as pdfjs_dist_types_src_display_api0 from "pdfjs-dist/types/src/display/api";
3
3
 
4
4
  //#region src/utils.d.ts
5
+ /**
6
+ * 打开 PDF 文件
7
+ *
8
+ * @param url - PDF 文件的 URL 或 File 对象
9
+ * @returns PDF 文档、页面、ID 和画布
10
+ *
11
+ * @example
12
+ * ```ts
13
+ * import { openPdf } from '@oiij/js-pdf'
14
+ *
15
+ * // 从 URL 打开
16
+ * const { pdf, canvases } = await openPdf('https://example.com/file.pdf')
17
+ *
18
+ * // 从 File 对象打开
19
+ * const file = document.querySelector('input[type="file"]').files[0]
20
+ * const { pdf, canvases } = await openPdf(file)
21
+ * ```
22
+ */
5
23
  declare function openPdf(url?: string | URL | File): Promise<{
6
24
  pdf: pdfjs_dist_types_src_display_api0.PDFDocumentProxy;
7
25
  pages: pdfjs_dist_types_src_display_api0.PDFPageProxy[];
8
26
  id: string;
9
27
  canvases: HTMLCanvasElement[];
10
28
  } | undefined>;
29
+ /**
30
+ * 将画布转换为 PDF
31
+ *
32
+ * @param canvases - 画布数组
33
+ * @param fileName - 文件名
34
+ *
35
+ * @example
36
+ * ```ts
37
+ * import { canvas2Pdf } from '@oiij/js-pdf'
38
+ *
39
+ * // 将画布数组转换为 PDF 并保存
40
+ * canvas2Pdf(canvases, 'output.pdf')
41
+ * ```
42
+ */
11
43
  declare function canvas2Pdf(canvases: HTMLCanvasElement[], fileName: string): void;
44
+ /**
45
+ * 将画布转换为 ZIP 文件
46
+ *
47
+ * @param canvases - 画布数组
48
+ * @param fileName - 文件名
49
+ * @returns Promise<Blob[]>
50
+ *
51
+ * @example
52
+ * ```ts
53
+ * import { canvas2Zip } from '@oiij/js-pdf'
54
+ *
55
+ * // 将画布数组转换为 ZIP 并保存
56
+ * await canvas2Zip(canvases, 'output')
57
+ * ```
58
+ */
12
59
  declare function canvas2Zip(canvases: HTMLCanvasElement[], fileName: string): Promise<unknown>;
60
+ /**
61
+ * 读取 PDF 文件
62
+ *
63
+ * @param buffer - PDF 文件的 ArrayBuffer
64
+ * @returns PDF 文档、页面、ID 和画布
65
+ *
66
+ * @example
67
+ * ```ts
68
+ * import { readPdfFile } from '@oiij/js-pdf'
69
+ *
70
+ * // 读取 PDF 文件缓冲区
71
+ * const buffer = await file.arrayBuffer()
72
+ * const { pdf, canvases } = await readPdfFile(buffer)
73
+ * ```
74
+ */
13
75
  declare function readPdfFile(buffer: ArrayBuffer): Promise<{
14
76
  pdf: pdfjs_dist_types_src_display_api0.PDFDocumentProxy;
15
77
  pages: pdfjs_dist_types_src_display_api0.PDFPageProxy[];
@@ -18,48 +80,178 @@ declare function readPdfFile(buffer: ArrayBuffer): Promise<{
18
80
  }>;
19
81
  //#endregion
20
82
  //#region src/index.d.ts
83
+ /**
84
+ * 颜色类型
85
+ */
21
86
  type Color = string | [number, number, number, number];
87
+ /**
88
+ * 文本样式类型
89
+ */
22
90
  type TextStyle = {
91
+ /**
92
+ * 字体大小
93
+ */
23
94
  fontSize?: number;
95
+ /**
96
+ * 字体名称
97
+ */
24
98
  fontName?: string;
99
+ /**
100
+ * 字体样式
101
+ */
25
102
  fontStyle?: HTMLFontFace['style'];
103
+ /**
104
+ * 字体粗细
105
+ */
26
106
  fontWeight?: HTMLFontFace['weight'];
107
+ /**
108
+ * 文本颜色
109
+ */
27
110
  textColor?: Color;
28
111
  };
112
+ /**
113
+ * 绘制样式类型
114
+ */
29
115
  type DrawStyle = {
116
+ /**
117
+ * 绘制颜色
118
+ */
30
119
  drawColor?: Color;
120
+ /**
121
+ * 填充颜色
122
+ */
31
123
  fillColor?: Color;
124
+ /**
125
+ * 字符间距
126
+ */
32
127
  charSpace?: number;
128
+ /**
129
+ * 线宽
130
+ */
33
131
  lineWidth?: number;
132
+ /**
133
+ * 样式
134
+ */
34
135
  style?: 'S' | 'F' | 'FD' | 'DF' | null;
35
136
  };
137
+ /**
138
+ * PDF 样式类型
139
+ */
36
140
  type PDFStyle = TextStyle & DrawStyle & {};
141
+ /**
142
+ * PDF 数据类型
143
+ */
37
144
  type PDFDataType = 'text' | 'image' | 'circle' | 'line' | 'lines';
145
+ /**
146
+ * 文本选项类型
147
+ */
38
148
  type OTextOptions = TextOptions & TextStyle;
149
+ /**
150
+ * 图片选项类型
151
+ */
39
152
  type OImageOptions = Omit<ImageOptions, 'imageData'> & {
153
+ /**
154
+ * 图片数据
155
+ */
40
156
  imageData: ImageOptions['imageData'] | (() => ImageOptions['imageData']) | (() => Promise<ImageOptions['imageData']>);
41
157
  };
158
+ /**
159
+ * 圆形选项类型
160
+ */
42
161
  type OCircleOptions = DrawStyle & {
162
+ /**
163
+ * x 坐标
164
+ */
43
165
  x: number;
166
+ /**
167
+ * y 坐标
168
+ */
44
169
  y: number;
170
+ /**
171
+ * 半径
172
+ */
45
173
  r: number;
46
174
  };
175
+ /**
176
+ * 线段选项类型
177
+ */
47
178
  type OLineOptions = DrawStyle & {
179
+ /**
180
+ * 起点 x 坐标
181
+ */
48
182
  x1: number;
183
+ /**
184
+ * 起点 y 坐标
185
+ */
49
186
  y1: number;
187
+ /**
188
+ * 终点 x 坐标
189
+ */
50
190
  x2: number;
191
+ /**
192
+ * 终点 y 坐标
193
+ */
51
194
  y2: number;
52
195
  };
196
+ /**
197
+ * 多线段选项类型
198
+ */
53
199
  type OLinesOptions = DrawStyle & {
200
+ /**
201
+ * 线段数组
202
+ */
54
203
  lines: number[][];
204
+ /**
205
+ * x 坐标
206
+ */
55
207
  x: number;
208
+ /**
209
+ * y 坐标
210
+ */
56
211
  y: number;
212
+ /**
213
+ * 缩放比例
214
+ */
57
215
  scale?: [number, number];
216
+ /**
217
+ * 是否闭合
218
+ */
58
219
  closed?: boolean;
59
220
  };
221
+ /**
222
+ * PDF 数据行类型
223
+ */
60
224
  type PDFDataRow<T extends PDFDataType = PDFDataType> = {
225
+ /**
226
+ * 数据类型
227
+ */
61
228
  type: T;
62
229
  } & (T extends 'text' ? OTextOptions : T extends 'image' ? OImageOptions : T extends 'circle' ? OCircleOptions : T extends 'line' ? OLineOptions : T extends 'lines' ? OLinesOptions : never);
230
+ /**
231
+ * 生成 PDF
232
+ *
233
+ * @param data - PDF 数据行数组
234
+ * @param options - jsPDF 选项
235
+ * @param globalStyle - 全局样式
236
+ * @returns PDF 实例
237
+ *
238
+ * @example
239
+ * ```ts
240
+ * import { generatePDF } from '@oiij/js-pdf'
241
+ *
242
+ * const { pdf } = await generatePDF([
243
+ * {
244
+ * type: 'text',
245
+ * text: 'Hello World',
246
+ * x: 10,
247
+ * y: 10
248
+ * }
249
+ * ])
250
+ *
251
+ * // 保存 PDF
252
+ * pdf.save('example.pdf')
253
+ * ```
254
+ */
63
255
  declare function generatePDF(data: PDFDataRow[], options?: jsPDFOptions, globalStyle?: PDFStyle): Promise<{
64
256
  pdf: jsPDF;
65
257
  }>;
package/dist/index.mjs CHANGED
@@ -58,6 +58,24 @@ async function pdf2Canvases(pdf) {
58
58
  return Promise.reject(error);
59
59
  }
60
60
  }
61
+ /**
62
+ * 打开 PDF 文件
63
+ *
64
+ * @param url - PDF 文件的 URL 或 File 对象
65
+ * @returns PDF 文档、页面、ID 和画布
66
+ *
67
+ * @example
68
+ * ```ts
69
+ * import { openPdf } from '@oiij/js-pdf'
70
+ *
71
+ * // 从 URL 打开
72
+ * const { pdf, canvases } = await openPdf('https://example.com/file.pdf')
73
+ *
74
+ * // 从 File 对象打开
75
+ * const file = document.querySelector('input[type="file"]').files[0]
76
+ * const { pdf, canvases } = await openPdf(file)
77
+ * ```
78
+ */
61
79
  async function openPdf(url) {
62
80
  try {
63
81
  if (url && (typeof url === "string" || url instanceof URL)) {
@@ -97,6 +115,20 @@ function canvas2Blob(canvas) {
97
115
  }
98
116
  });
99
117
  }
118
+ /**
119
+ * 将画布转换为 PDF
120
+ *
121
+ * @param canvases - 画布数组
122
+ * @param fileName - 文件名
123
+ *
124
+ * @example
125
+ * ```ts
126
+ * import { canvas2Pdf } from '@oiij/js-pdf'
127
+ *
128
+ * // 将画布数组转换为 PDF 并保存
129
+ * canvas2Pdf(canvases, 'output.pdf')
130
+ * ```
131
+ */
100
132
  function canvas2Pdf(canvases, fileName) {
101
133
  let doc = null;
102
134
  canvases.forEach((canvas, i) => {
@@ -113,6 +145,21 @@ function canvas2Pdf(canvases, fileName) {
113
145
  return doc;
114
146
  });
115
147
  }
148
+ /**
149
+ * 将画布转换为 ZIP 文件
150
+ *
151
+ * @param canvases - 画布数组
152
+ * @param fileName - 文件名
153
+ * @returns Promise<Blob[]>
154
+ *
155
+ * @example
156
+ * ```ts
157
+ * import { canvas2Zip } from '@oiij/js-pdf'
158
+ *
159
+ * // 将画布数组转换为 ZIP 并保存
160
+ * await canvas2Zip(canvases, 'output')
161
+ * ```
162
+ */
116
163
  function canvas2Zip(canvases, fileName) {
117
164
  return new Promise((resolve, reject) => {
118
165
  const zip = new JsZip();
@@ -127,6 +174,21 @@ function canvas2Zip(canvases, fileName) {
127
174
  }).catch((error) => reject(error));
128
175
  });
129
176
  }
177
+ /**
178
+ * 读取 PDF 文件
179
+ *
180
+ * @param buffer - PDF 文件的 ArrayBuffer
181
+ * @returns PDF 文档、页面、ID 和画布
182
+ *
183
+ * @example
184
+ * ```ts
185
+ * import { readPdfFile } from '@oiij/js-pdf'
186
+ *
187
+ * // 读取 PDF 文件缓冲区
188
+ * const buffer = await file.arrayBuffer()
189
+ * const { pdf, canvases } = await readPdfFile(buffer)
190
+ * ```
191
+ */
130
192
  async function readPdfFile(buffer) {
131
193
  const pdf = await getDocument(buffer).promise;
132
194
  const { pages, id, canvases } = await pdf2Canvases(pdf);
@@ -148,6 +210,31 @@ function setDrawStyle(pdf, data) {
148
210
  else pdf.setDrawColor(...drawColor);
149
211
  pdf.setLineWidth(lineWidth);
150
212
  }
213
+ /**
214
+ * 生成 PDF
215
+ *
216
+ * @param data - PDF 数据行数组
217
+ * @param options - jsPDF 选项
218
+ * @param globalStyle - 全局样式
219
+ * @returns PDF 实例
220
+ *
221
+ * @example
222
+ * ```ts
223
+ * import { generatePDF } from '@oiij/js-pdf'
224
+ *
225
+ * const { pdf } = await generatePDF([
226
+ * {
227
+ * type: 'text',
228
+ * text: 'Hello World',
229
+ * x: 10,
230
+ * y: 10
231
+ * }
232
+ * ])
233
+ *
234
+ * // 保存 PDF
235
+ * pdf.save('example.pdf')
236
+ * ```
237
+ */
151
238
  async function generatePDF(data, options, globalStyle) {
152
239
  const pdf = new jsPDF(options);
153
240
  const font = pdf.getFont();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oiij/js-pdf",
3
3
  "type": "module",
4
- "version": "0.0.10",
4
+ "version": "0.0.11",
5
5
  "description": "A simple PDF library for JavaScript",
6
6
  "author": "oiij",
7
7
  "license": "MIT",