pdfjs-annotation-extension-for-react 0.2.2 → 0.2.3
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 +3 -0
- package/README.zh-CN.md +383 -0
- package/dist/{exceljs.min-Cu8LPgr_.cjs → exceljs.min-CAz4fr-4.cjs} +1 -1
- package/dist/{exceljs.min-D6gDM_x3.js → exceljs.min-DJ12UAL9.js} +1 -1
- package/dist/{index-CCLCao64.cjs → index-B8vZYXIA.cjs} +52 -52
- package/dist/{index-BxxkObWN.js → index-Bi8icbUW.js} +25649 -25536
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +7 -0
- package/dist/index.es.js +1 -1
- package/dist/pdfjs-annotation-extension-for-react.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
</p>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
8
|
+
---
|
|
9
|
+
English | [简体中文](./README.zh-CN.md)
|
|
8
10
|
---
|
|
9
11
|
|
|
10
12
|
[](https://www.npmjs.com/package/pdfjs-annotation-extension-for-react)
|
|
@@ -275,6 +277,7 @@ A lightweight PDF viewer with toolbar, sidebar, actions and extensible UI slots.
|
|
|
275
277
|
| `sidebar` | `SidebarPanel[]` | — | Custom sidebar component |
|
|
276
278
|
| `toolbar` | `React.ReactNode \| (context: PdfViewerContextValue) => React.ReactNode` | — | Custom toolbar component |
|
|
277
279
|
| `showTextLayer` | `boolean` | `true` | Whether to render the text layer |
|
|
280
|
+
| `showAnnotations` | `boolean` | `false` | Whether to render the pdf annotations layer |
|
|
278
281
|
| `defaultActiveSidebarKey` | `string` | null | Default Active Sidebar Key |
|
|
279
282
|
| `onDocumentLoaded` | `(pdfViewer: PDFViewer \| null) => void` | — | Callback invoked when the PDF <br />document is fully loaded and the viewer is initialized |
|
|
280
283
|
| `onEventBusReady` | `(eventBus: EventBus \| null) => void` | — | Callback invoked when the pdf.js EventBus is ready |
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<h1 align="center"><code>pdfjs-annotation-extension-for-react</code> ⚡️ </h1>
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>一个基于 PDF.js 构建的轻量级、可扩展的 React PDF 批注器和查看器</strong><br/> 支持编辑现有 PDF 文件批注、发布评论、回复、提交注释数据和加载以进行进一步编辑。
|
|
5
|
+
</p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
[English](./README.md) ｜ 简体中文
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
[](https://www.npmjs.com/package/pdfjs-annotation-extension-for-react)
|
|
13
|
+
[](./LICENSE)
|
|
14
|
+
|
|
15
|
+
## 在线演示
|
|
16
|
+
|
|
17
|
+
[](https://laomai-codefee.github.io/pdfjs-annotation-extension-for-react-demo/)
|
|
18
|
+
|
|
19
|
+
## ✨ 特性
|
|
20
|
+
|
|
21
|
+
- ✍️ 丰富的注释系统
|
|
22
|
+
- 高亮、绘图、形状、文本注释
|
|
23
|
+
- 签名（手绘 / 输入 / 上传）
|
|
24
|
+
- 带编辑器支持的印章
|
|
25
|
+
- 直接编辑原生 PDF 注释
|
|
26
|
+
- 📄 基于 PDF.js 的高保真 PDF 渲染
|
|
27
|
+
- 🎨 基于 Radix UI Themes 的主题系统
|
|
28
|
+
- 🌍 国际化（中文简体、英文）
|
|
29
|
+
- 🧩 高度可自定义的 UI
|
|
30
|
+
- 工具栏 / 侧边栏 / 操作完全可覆盖
|
|
31
|
+
- 🏢 企业友好配置
|
|
32
|
+
- `defaultOptions` 支持深度部分 + 深度合并
|
|
33
|
+
- 💾 导出
|
|
34
|
+
- 将注释导出为 PDF
|
|
35
|
+
- 将注释导出为 Excel
|
|
36
|
+
- 🧠 为可扩展性而设计
|
|
37
|
+
- 清晰的上下文和扩展架构
|
|
38
|
+
|
|
39
|
+
## ✍️ 批注工具
|
|
40
|
+
|
|
41
|
+
1. 矩形
|
|
42
|
+
2. 圆形
|
|
43
|
+
3. 自由手绘（短时间内绘制的会被分组）
|
|
44
|
+
4. 自由高亮（带自动校正）
|
|
45
|
+
5. 箭头
|
|
46
|
+
6. 云线
|
|
47
|
+
7. 自由文本
|
|
48
|
+
8. 签名 （上传、手绘、输入、默认签名）
|
|
49
|
+
9. 印章（上传自定义图片、自定义印章、 默认印章）
|
|
50
|
+
10. 文本高亮
|
|
51
|
+
11. 文本删除线
|
|
52
|
+
12. 文本下划线
|
|
53
|
+
13. 文本
|
|
54
|
+
|
|
55
|
+
## ✍️ 编辑 PDF 文件中的现有批注
|
|
56
|
+
|
|
57
|
+
1. 矩形
|
|
58
|
+
2. 圆形
|
|
59
|
+
3. 绘制
|
|
60
|
+
4. 自由文本
|
|
61
|
+
5. 线条
|
|
62
|
+
6. 多边形
|
|
63
|
+
7. 折线
|
|
64
|
+
8. 文本
|
|
65
|
+
9. 高亮
|
|
66
|
+
10. 下划线
|
|
67
|
+
11. 删除线
|
|
68
|
+
|
|
69
|
+
## 📦 安装
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm install pdfjs-annotation-extension-for-react
|
|
73
|
+
or
|
|
74
|
+
yarn add pdfjs-annotation-extension-for-react
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
# 🚀 快速开始
|
|
78
|
+
|
|
79
|
+
## 1. PDF 批注
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import { PdfAnnotator } from 'pdfjs-annotation-extension-for-react'
|
|
83
|
+
import 'pdfjs-annotation-extension-for-react/style'
|
|
84
|
+
|
|
85
|
+
export default function App() {
|
|
86
|
+
return (
|
|
87
|
+
<PdfAnnotator
|
|
88
|
+
title="PDF Annotator"
|
|
89
|
+
url="https://example.com/sample.pdf"
|
|
90
|
+
user={{ id: 'u1', name: 'Alice' }}
|
|
91
|
+
onSave={(annotations) => {
|
|
92
|
+
console.log('Saved annotations:', annotations)
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## 2. 基础 PDF 查看器
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
import { PdfViewer } from 'pdfjs-annotation-extension-for-react'
|
|
103
|
+
import 'pdfjs-annotation-extension-for-react/style'
|
|
104
|
+
|
|
105
|
+
export default function App() {
|
|
106
|
+
return (
|
|
107
|
+
<PdfViewer
|
|
108
|
+
title="PDF Viewer"
|
|
109
|
+
url="https://example.com/sample.pdf"
|
|
110
|
+
layoutStyle={{ width: '100vw', height: '100vh' }}
|
|
111
|
+
/>
|
|
112
|
+
)
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
# 🧩 组件
|
|
117
|
+
|
|
118
|
+
### 基础属性
|
|
119
|
+
|
|
120
|
+
| Name | Type | Default | Description |
|
|
121
|
+
| ---------------------- | ----------------------- | --------------------------------------- | ------------------------------------------------------ |
|
|
122
|
+
| `theme` | Radix Theme Color | `violet` | Theme color of the viewer UI |
|
|
123
|
+
| `title` | `React.ReactNode` | — | Page title content; accepts text or custom React nodes |
|
|
124
|
+
| `url *` | `string \| URL` | — | PDF file URL; supports string URLs or `URL` objects |
|
|
125
|
+
| `locale` | `'zh-CN' \| 'en-US'` | `zh-CN` | Locale used for internationalization |
|
|
126
|
+
| `initialScale` | `PdfScale` | `auto` | Initial zoom level of the PDF viewer |
|
|
127
|
+
| `layoutStyle` | `React.CSSProperties` | `{ width: '100vw', height: '100vh' }` | Styles applied to the PDF viewer container |
|
|
128
|
+
| `isSidebarCollapsed` | `boolean` | `false` | Whether the sidebar is collapsed by default |
|
|
129
|
+
| `enableRange` | `boolean \| 'auto'` | `auto` | Enables HTTP Range (streaming) loading for PDFs |
|
|
130
|
+
|
|
131
|
+
## ✍️ PdfAnnotator - PDF批注器
|
|
132
|
+
|
|
133
|
+
具有注释功能的高级 PDF 查看器
|
|
134
|
+
|
|
135
|
+
### 属性
|
|
136
|
+
|
|
137
|
+
| Name | Type | Default | Description |
|
|
138
|
+
| --------------------------- | ------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------- |
|
|
139
|
+
| `user` | `User` | `{ id: 'null', name: 'unknown' }` | Current user information<br />used to identify the annotation author |
|
|
140
|
+
| `enableNativeAnnotations` | `boolean` | `false` | Native annotations embedded in the PDF file |
|
|
141
|
+
| `defaultShowAnnotationsSidebar` | `boolean` | `false` | Show Annotations Sidebar |
|
|
142
|
+
| `defaultOptions` | `DeepPartial` | — | Default configuration for the annotator; |
|
|
143
|
+
| `initialAnnotations` | `IAnnotationStore[]` | — | Existing annotations to be rendered during initialization |
|
|
144
|
+
| `actions` | `React.ReactNode \| React.ComponentType` | — | Custom actions area |
|
|
145
|
+
| `onSave` | `(annotations: IAnnotationStore[]) => void` | — | Callback triggered when annotations are saved |
|
|
146
|
+
| `onLoad` | `() => void` | — | Callback triggered when the PDF and annotator are fully loaded |
|
|
147
|
+
| `onAnnotationAdded` | `(annotation: IAnnotationStore) => void` | — | Fired when a new annotation is created |
|
|
148
|
+
| `onAnnotationDeleted` | `(id: string) => void` | — | Fired when an annotation is deleted |
|
|
149
|
+
| `onAnnotationSelected` | `(annotation: IAnnotationStore \| null, isClick: boolean) => void` | — | Fired when an annotation is selected or deselected |
|
|
150
|
+
| `onAnnotationUpdated` | `(annotation: IAnnotationStore) => void` | — | Fired when an existing annotation is modified |
|
|
151
|
+
|
|
152
|
+
### ⚙️ defaultOptions
|
|
153
|
+
|
|
154
|
+
#### ✅ 深度部分 + 深度合并
|
|
155
|
+
|
|
156
|
+
`defaultOptions` 不是完整的配置覆盖
|
|
157
|
+
|
|
158
|
+
- 它被定义为 `DeepPartial<PdfAnnotatorOptions> `
|
|
159
|
+
- 它将与系统默认配置进行深度合并
|
|
160
|
+
|
|
161
|
+
这确保了：
|
|
162
|
+
- 您只需覆盖需要的内容
|
|
163
|
+
- 系统默认值保持稳定
|
|
164
|
+
- 适合长期企业使用
|
|
165
|
+
|
|
166
|
+
#### 示例
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import qiantubifengshouxietiFont from './fonts/qiantubifengshouxieti.ttf';
|
|
170
|
+
|
|
171
|
+
<PdfAnnotator
|
|
172
|
+
url="sample.pdf"
|
|
173
|
+
defaultOptions={{
|
|
174
|
+
colors: ['#000', '#1677ff'],
|
|
175
|
+
signature: {
|
|
176
|
+
colors: ['#000000', '#ff0000', '#1677ff'],
|
|
177
|
+
type: 'Upload',
|
|
178
|
+
maxSize: 1024 * 1024 * 5,
|
|
179
|
+
accept: '.png,.jpg,.jpeg,.bmp',
|
|
180
|
+
defaultSignature: ['data:image/png;base64,...'],
|
|
181
|
+
defaultFont: [
|
|
182
|
+
{
|
|
183
|
+
label: '楷体',
|
|
184
|
+
value: 'STKaiti',
|
|
185
|
+
external: false
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
label: '千图笔锋手写体',
|
|
189
|
+
value: 'qiantubifengshouxieti',
|
|
190
|
+
external: true,
|
|
191
|
+
url: qiantubifengshouxietiFont
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
label: '平方长安体',
|
|
195
|
+
value: 'PingFangChangAnTi-2',
|
|
196
|
+
external: true,
|
|
197
|
+
url: 'http://server/PingFangChangAnTi-2.ttf'
|
|
198
|
+
}
|
|
199
|
+
]
|
|
200
|
+
},
|
|
201
|
+
stamp: {
|
|
202
|
+
maxSize: 1024 * 1024 * 5,
|
|
203
|
+
accept: '.png,.jpg,.jpeg,.bmp',
|
|
204
|
+
defaultStamp: ['data:image/png;base64,...'],
|
|
205
|
+
editor: {
|
|
206
|
+
defaultBackgroundColor: '#2f9e44',
|
|
207
|
+
defaultBorderColor: '#2b8a3e',
|
|
208
|
+
defaultBorderStyle: 'none',
|
|
209
|
+
defaultTextColor: '#fff',
|
|
210
|
+
defaultFont: [
|
|
211
|
+
{
|
|
212
|
+
label: '楷体',
|
|
213
|
+
value: 'STKaiti'
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}}
|
|
219
|
+
/>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### 🎨 自定义UI
|
|
223
|
+
|
|
224
|
+
#### Actions
|
|
225
|
+
|
|
226
|
+
```jsx
|
|
227
|
+
<PdfAnnotator
|
|
228
|
+
url={pdfUrl}
|
|
229
|
+
actions={({ save, exportToPdf, exportToExcel }) => (
|
|
230
|
+
<>
|
|
231
|
+
<button onClick={save}>Save</button>
|
|
232
|
+
<button onClick={() => exportToPdf('annotations')}>
|
|
233
|
+
Export PDF
|
|
234
|
+
</button>
|
|
235
|
+
<button onClick={() => exportToExcel('annotations')}>
|
|
236
|
+
Export Excel
|
|
237
|
+
</button>
|
|
238
|
+
</>
|
|
239
|
+
)}
|
|
240
|
+
/>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
### 🖋 签名和印章配置
|
|
244
|
+
|
|
245
|
+
```jsx
|
|
246
|
+
<PdfAnnotator
|
|
247
|
+
url={pdfUrl}
|
|
248
|
+
defaultOptions={{
|
|
249
|
+
signature: {
|
|
250
|
+
defaultSignature: ['data:image/png;base64,...'],
|
|
251
|
+
defaultFont: [
|
|
252
|
+
{
|
|
253
|
+
label: 'Custom Font',
|
|
254
|
+
value: 'MyFont',
|
|
255
|
+
external: true,
|
|
256
|
+
url: '/fonts/myfont.ttf'
|
|
257
|
+
}
|
|
258
|
+
]
|
|
259
|
+
},
|
|
260
|
+
stamp: {
|
|
261
|
+
defaultStamp: ['data:image/png;base64,...']
|
|
262
|
+
}
|
|
263
|
+
}}
|
|
264
|
+
/>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
## 📄 PdfViewer - PDF 查看器
|
|
268
|
+
|
|
269
|
+
具有工具栏、侧边栏、操作和可扩展 UI 插槽的轻量级 PDF 查看器。
|
|
270
|
+
|
|
271
|
+
### Props
|
|
272
|
+
|
|
273
|
+
| Name | Type | Default | Description |
|
|
274
|
+
| ---------------------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------ |
|
|
275
|
+
| `actions` | `React.ReactNode \| (context: PdfViewerContextValue) => React.ReactNode` | — | Custom actions area in the toolbar |
|
|
276
|
+
| `sidebar` | `SidebarPanel[]` | — | Custom sidebar component |
|
|
277
|
+
| `toolbar` | `React.ReactNode \| (context: PdfViewerContextValue) => React.ReactNode` | — | Custom toolbar component |
|
|
278
|
+
| `showTextLayer` | `boolean` | `true` | Whether to render the text layer |
|
|
279
|
+
| `showAnnotations` | `boolean` | `false` | Whether to render the pdf annotations layer |
|
|
280
|
+
| `defaultActiveSidebarKey` | `string` | null | Default Active Sidebar Key |
|
|
281
|
+
| `onDocumentLoaded` | `(pdfViewer: PDFViewer \| null) => void` | — | Callback invoked when the PDF <br />document is fully loaded and the viewer is initialized |
|
|
282
|
+
| `onEventBusReady` | `(eventBus: EventBus \| null) => void` | — | Callback invoked when the pdf.js EventBus is ready |
|
|
283
|
+
|
|
284
|
+
### 🎨 自定义 UI
|
|
285
|
+
|
|
286
|
+
#### Toolbar
|
|
287
|
+
|
|
288
|
+
```jsx
|
|
289
|
+
<PdfViewer
|
|
290
|
+
url={pdfUrl}
|
|
291
|
+
toolbar={(context) => (
|
|
292
|
+
<>
|
|
293
|
+
<button onClick={() => console.log(context.pdfViewer)}>
|
|
294
|
+
PDF Viewer
|
|
295
|
+
</button>
|
|
296
|
+
<button onClick={context.toggleSidebar}>
|
|
297
|
+
Toggle Sidebar
|
|
298
|
+
</button>
|
|
299
|
+
<button onClick={() => context.setSidebarCollapsed(false)}>
|
|
300
|
+
Open Sidebar
|
|
301
|
+
</button>
|
|
302
|
+
<button onClick={() => context.setSidebarCollapsed(true)}>
|
|
303
|
+
Close Sidebar
|
|
304
|
+
</button>
|
|
305
|
+
</>
|
|
306
|
+
)}
|
|
307
|
+
/>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
### Sidebar
|
|
311
|
+
|
|
312
|
+
```jsx
|
|
313
|
+
<PdfViewer
|
|
314
|
+
url={pdfUrl}
|
|
315
|
+
sidebar={[{
|
|
316
|
+
key: 'sidebar-1',
|
|
317
|
+
title: 'Sidebar 1',
|
|
318
|
+
icon: <BsLayoutTextSidebar />,
|
|
319
|
+
render: (context) => (
|
|
320
|
+
<div style={{ display: 'flex', gap: 10, flexDirection: 'column' }}>
|
|
321
|
+
Sidebar 1
|
|
322
|
+
<button onClick={context.toggleSidebar}>
|
|
323
|
+
toggleSidebar
|
|
324
|
+
</button>
|
|
325
|
+
<button onClick={() => console.log(context.pdfViewer)}>
|
|
326
|
+
Get PDF Viewer
|
|
327
|
+
</button>
|
|
328
|
+
<button onClick={() => {
|
|
329
|
+
context.pdfViewer?.scrollPageIntoView({
|
|
330
|
+
pageNumber: 1
|
|
331
|
+
})
|
|
332
|
+
}}>
|
|
333
|
+
goto page1
|
|
334
|
+
</button>
|
|
335
|
+
<button onClick={() => {
|
|
336
|
+
context.pdfViewer?.scrollPageIntoView({
|
|
337
|
+
pageNumber: 10
|
|
338
|
+
})
|
|
339
|
+
}}>
|
|
340
|
+
goto page 10
|
|
341
|
+
</button>
|
|
342
|
+
</div>
|
|
343
|
+
)
|
|
344
|
+
}]}
|
|
345
|
+
/>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
### Actions
|
|
349
|
+
|
|
350
|
+
```jsx
|
|
351
|
+
<PdfViewer
|
|
352
|
+
url={pdfUrl}
|
|
353
|
+
actions={(context) => (
|
|
354
|
+
<>
|
|
355
|
+
<button onClick={() => console.log(context.pdfViewer)}>
|
|
356
|
+
PDF Viewer
|
|
357
|
+
</button>
|
|
358
|
+
<button onClick={context.toggleSidebar}>
|
|
359
|
+
Toggle Sidebar
|
|
360
|
+
</button>
|
|
361
|
+
<button onClick={() => context.setSidebarCollapsed(false)}>
|
|
362
|
+
Open Sidebar
|
|
363
|
+
</button>
|
|
364
|
+
<button onClick={() => context.setSidebarCollapsed(true)}>
|
|
365
|
+
Close Sidebar
|
|
366
|
+
</button>
|
|
367
|
+
</>
|
|
368
|
+
)}
|
|
369
|
+
/>
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
---
|
|
373
|
+
|
|
374
|
+
# 🌍 浏览器支持
|
|
375
|
+
|
|
376
|
+
- Chrome (latest)
|
|
377
|
+
- Firefox (latest)
|
|
378
|
+
- Safari (latest)
|
|
379
|
+
- Edge (latest)
|
|
380
|
+
|
|
381
|
+
# 📄 许可证
|
|
382
|
+
|
|
383
|
+
MIT
|